Как сделать сайт адаптивным: полезные советы

становится “резиновым”. Если ширина меньше 650 пикселей, контейнеры с контентом и боковая

панель становятся полноэкранными и располагаются в одной колонке.

HTML

На странице есть контейнер “pagewrap”, который содержит “header”, “content”, “sidebar” и “footer”.

13

HTML5.js

Internet Explorer v8 и ранние версии, не поддерживает новые элементы HTML5, такие как

,

,

,

и др. Добавив файл html5.js, вы сделаете IE способным понять

новые элементы.

CSS

Сброс настроек элементов HTML5

Нижеприведенный CSS код сбрасывает стандартные элементы HTML5 (статья, боковая панель, хедер, футер, элемент) и делает их элементами блока.

Основные CSS без медиа-запросов

CSS3 медиа-запросы

Internet Explorer 8 и ранние версии не поддерживают медиа-запросы CSS3, это можно исправить

с помощью css3-mediaqueries.js

14

Создайте новый 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:auto\9 для IE8.

Масштабируемые встроенные видео

Для видео используются те же правила, что и для изображений. Но max-width:100% (только для

видео) не работает в Safari, вместо параметра max-width:100% используйте width: 100%.

Исходный масштаб. Мета-тег (iPhone)

По умолчанию iPhone Safari сжимает страницы, чтобы они соответствовали экрану. Этот мета-тег

дает команду iPhone Safari использовать ширину устройства в качестве ширины страницы.

16

Сжатие

Скорость работы сайта должна быть быстрой. При этом необходимо сжать как изображения, так и файлы CSS. И хотя сжимать файлы изображений довольно легко (большинство редакторов

изображений осуществляют это с легкостью), файлы CSS требуют некоторого опыта. Существует

ряд методов, которые помогут вам это сделать.

Минификация

Вам необходимо свести к минимуму пробелы между элементами, свойствами и селекторами.

Уменьшить количество пробелов - значит уменьшить количество байтов для загрузки.

GZIP

GZIP - это утилита для сжатия, которая сканирует ваши файлы на наличие избыточных байтов.

Эксперты говорят, что zip-файлы после минимизации становятся намного легче.

17

Благодарим за прочтение!

Если вы сочли это руководство полезным, скорее всего, вам понравятся и другие наши электронные

книги. Работая над ними, наши авторы фокусировались на темах, которые помогают новичкам

создавать онлайн-бизнес и делать свои сайты прибыльными:

Посмотреть другие книги

P.S. Тщательно продуманный контент имеет решающее значение для вашего сайта, но есть

множество других факторов, которые влияют на его успех. Безупречный дизайн и надежная

архитектура - это основные стержни любого онлайн-ресурса.

Если вы собираетесь запустить новый сайт или хотите обновить дизайн текущего, взгляните на

готовые решения от TemplateMonster. У нас есть более 26 тысяч шаблонов для сайтов на выбор, созданных профессионалами.

Посмотреть шаблоны