Как сделать сайт адаптивным: полезные советы - "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-файлы после минимизации становятся намного легче.