Как сделать сайт адаптивным: полезные советы - "TemplateMonster"
12
Пример
Контейнер страницы имеет ширину 980 пикселей для любого разрешения более 1024 пикселей.
Для проверки ширины используются медиа-запросы. если ширина меньше 980 пикселей, макет
становится “резиновым”. Если ширина меньше 650 пикселей, контейнеры с контентом и боковая
панель становятся полноэкранными и располагаются в одной колонке.
HTML
На странице есть контейнер “pagewrap”, который содержит “header”, “content”, “sidebar” и “footer”.
13
HTML5.js
Internet Explorer v8 и ранние версии, не поддерживает новые элементы HTML5, такие как <header>, <article>, <footer>, <figure> и др. Добавив файл html5.js, вы сделаете IE способным понять
новые элементы.
CSS
Сброс настроек элементов HTML5
Нижеприведенный CSS код сбрасывает стандартные элементы HTML5 (статья, боковая панель, хедер, футер, элемент) и делает их элементами блока.
Основные CSS без медиа-запросов
CSS3 медиа-запросы
Internet Explorer 8 и ранние версии не поддерживают медиа-запросы CSS3, это можно исправить
с помощью css3-mediaqueries.js
14
<!--[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></
script>
<![endif]-->
Создайте новый CSS файл для медиа-запросов.
<link href=”media-queries.css” rel=”stylesheet” type=”text/css”>
Для экранов меньше чем 980 пикселей
Используются правила: pagewrap = reset width to 95%, content = reset width to60 %, sidebar = reset width to 30 %
Совет: используйте аутентичный (%), чтобы сделать блоки “резиновыми”.
Размер экрана меньше 650 пикселей (одноколоночный макет)
15
Экран меньше 480 пикселей
Масштабируемые изображения
Чтобы сделать масштабируемые изображения, просто добавьте max-width:100% и height:auto -
они работают на IE7, но не работают на IE8. Чтобы это исправить, добавьте width:auto9 для IE8.
Масштабируемые встроенные видео
Для видео используются те же правила, что и для изображений. Но max-width:100% (только для
видео) не работает в Safari, вместо параметра max-width:100% используйте width: 100%.
Исходный масштаб. Мета-тег (iPhone)
По умолчанию iPhone Safari сжимает страницы, чтобы они соответствовали экрану. Этот мета-тег
дает команду iPhone Safari использовать ширину устройства в качестве ширины страницы. <meta name=”viewport” content=”width=devicewidth; initial-scale=1.0”>
16
Сжатие
Скорость работы сайта должна быть быстрой. При этом необходимо сжать как изображения, так и файлы CSS. И хотя сжимать файлы изображений довольно легко (большинство редакторов
изображений осуществляют это с легкостью), файлы CSS требуют некоторого опыта. Существует
ряд методов, которые помогут вам это сделать.
Минификация
Вам необходимо свести к минимуму пробелы между элементами, свойствами и селекторами.
Уменьшить количество пробелов - значит уменьшить количество байтов для загрузки.
GZIP
GZIP - это утилита для сжатия, которая сканирует ваши файлы на наличие избыточных байтов.
Эксперты говорят, что zip-файлы после минимизации становятся намного легче.
