“Отзывчивый” дизайн за три шага

Перевод статьи «Responsive Design in 3 Steps». Автор Nick La.

Без сомнения, “Отзывчивый” веб-дизайн сейчас в моде. Если вы еще не знакомы с данным направлением, ознакомьтесь со списком сайтов, которые я недавно опубликовал. Для новичков, отзывчивые дизайн может показаться немного сложным, но на самом деле все проще, чем вы думаете. Я создал краткий учебник с целью помочь вам быстро начать работу. Я обещаю, вы узнаете об основах логики отзывчивого дизайна и media query всего за три шага (если у вас есть базовые знания CSS).

Шаг 1. Мета-тег – viewport

Большинство мобильных браузеров масштабируют HTML страницы таким образом, чтобы они по ширине полностью умещались на экране устройств. Используя мета-тег “viewport” можно исключить такое поведение браузеров. Мета-тег “viewport” со значениями указанными ниже говорит браузеру использовать ширину окна устройства и отключить начальное масштабирование. Включите этот мета-тег в <head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Браузер Internet Explorer 8 и старше не поддерживают возможности media query. Вы можете использовать специально разработанные java-скрипты media-queries.js или respond.js для добавления поддержки media query в IE. Используйте для этого условные комментарии, т.е. так, как показано ниже.

<!--[if lt IE 9]>
	<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Шаг 2. HTML-структура

Для примера я создал простой макет страницы с заголовком, содержанием, сайдбаром и нижним колонтитулом. Заголовок имеет фиксированную высоту 180px, ширина основного блока материала 600px, а сайдбара 300px.

Структура документа
Структура документа

Шаг 3. Media Queries

CSS3 Media Queries – основа отзывчивого дизайна. Это правила отображения материала для заданной ширины окна. Правила, которыми руководствуется браузер.

Следующий набор правил будет действовать, если ширина окна составляет 980px или меньше. Я установил процентные значения ширины всех контейнеров, так что контейнеры будут “резиновыми”.

Правила указанные для экранов шириной 980px
Правила указанные для экранов шириной 980px

Затем, для экранов 700px и менее, укажите значения ширины – auto для #content и #sidebar и они будут отображаться на всю доступную ширину.

Правила для экранов шириной 700px и меньше
Правила для экранов шириной 700px и меньше

Для 480px и меньше (мобильный экран), указываем для #header значение высоты – авто, изменяем размер шрифта h1 на 24px и скрываем #sidebar.

Правила для экранов шириной 480px и меньше
Правила для экранов шириной 480px и меньше

Вы можете написать столько media queries правил, сколько вам потребуется. Я только показал три в демо-версии. Суть media queries заключается в применении различных CSS правил для формирования различных макетов для определенной ширины окна. Эти правила могут быть указаны как в основном файле стилей, так и в дополнительных.

Заключение

Этот учебник призван показать вам основы адаптивного, отзывчивого дизайна. Если вы хотите знать больше, читайте мой предыдущий урок – Отзывчивый дизайн с media queries.

В продолжение темы читайте мою заметку “Отзывчивые” изображения.

Опубликовано

Обратите внимание на предыдущие записи: