Верстка адаптивная: предназначение и возможности

Понятие Responsive web-design (можно назвать «отзывчивым веб-дизайном») первым употребил Итан Маркотт в 2010 году в своей статье. С того времени развитие и расширение этой технологии в дизайне и верстке двигается стремительными темпами. И вправду, число веб пользователей, заходящих на Интернет-ресурсы, используя для этого мобильные устройства, возрастает с каждым днем, и если ваш сайт специализируется на онлайн продаже товара, то конечно верстка адаптивная - самый лучший вариант. Упускать эту аудиторию было бы глупо.

Владельцами Интернет-ресурсов всё больше заказывается не обычная, а адаптивная верстка. Однако не каждый разработчик в совершенстве владеет этой технологией. Верстка адаптивная - это оптимизация (адаптация) верстки под размеры, обусловленные окном в браузере, установленном на том устройстве, которым интернет-пользователь пользуется для просмотра странички.

Это возможность как основного контейнера, так и любого из элементов сайта подстраиваться под разрешение экрана, позволяя, таким образом, менять размеры шрифтов, расположения объектов, html цвета и все, что только можно пожелать.

При этом происходит не сдвижение и съеживание контента, как в резиновом дизайне, а полная его перестройка таким образом, чтобы всю информацию можно было отчетливо увидеть и понять в любом разрешении. Чтобы этого добиться, пользуются уплотнением элементов страницы, частичным сокращением элементов, изменением расположения отдельных блоков, и частично урезается графика. И все эти действия выполняются, не сказываясь на качестве.

В этом процессе html-код странички остается неизменным, меняется только css-файл.

@media only screen and (min-width: 1382px) {}

Верстка адаптивная, ее особенности

Чтобы выполнить адаптивную верстку, следует не забывать четыре основных момента. Для начала указание всех параметров ширины следует выполнить в процентном виде. Для вычисления пропорций нужно воспользоваться простым правилом: ширина блока делится на ширину внешнего блока и умножается на 100% (к примеру, ширина внешнего блока равняется 1000px, а внутренняя ширина равняется 200px, следовательно, этот внутренний блок будет обладать шириной, значение которой равняется 20%).

Если внутренний блок обладает еще одним внутренним блоком, то его ширина высчитывается по тому же принципу в соответствии с родительским блоком.

Вторая особенность, которой обладает адаптивная верстка - это media queries, с помощью которой можно осуществить оптимизацию макета для разных разрешений.

Информация css-файла должна быть расположена по возрастанию расширений, что и является третьим важным пунктом, который должен остаться в памяти.

Сперва нами должно быть проведено описание базовых стилей под примитивные телефоны и Pocket Internet Explorer (Windows Mobile 6.5). Ими не различается media queries, и они будут работать на основе базового дизайна.

После этого следует заняться указанием стилей под более разумные мобильные устройства, такие как «андроид», «айфон» и остальные, пользуясь следующей конструкцией:

@media only screen and (min-width: 480px) { }

Затем займемся пропиской свойств под планшеты для режимов portrait-а и десктопа:

@media only screen and (min-width: 768px) {}

После чего - свойств под ноутбуки, десктопы и планшеты для режимов landscape:

@media only screen and (min-width: 992px) {}

И в последнюю очередь нужно выполнять указание свойств под десктопы, имеющие большие разрешения и телевизоры:

@media only screen and (min-width: 1382px) {}

Media queries

Media queries - это часть стандарта CSS. Пользуясь этими свойствами, у нас есть возможность применения стилей для экранов, имеющих разные разрешения. При помощи этих свойств получают информацию о разрешениях на устройствах. К примеру, если на большом экране расположение трех колонок будет к ряду, то под десктопы в css-файле производят указание примерно такого типа:

@media (min-width: 768px) {

.col-1, col-2, col-3 {

float: left;

width: 30%;

margin-right: 3%;

}

}

Под экраны меньшей диагонали расположение колонок будет производиться одна под одной, и это займет весь экран. Для экранов такого типа следует прописать следующее: @media (max-width: 767px) {

.col-1, col-2, col-3 {

float: none;

width: 100%;

}

}

А под маленькие экраны этими блоками лучше и вовсе не пользоваться:

@media (max-width: 480px) {

.col-1, col-2, col-3 {

display: none;

}

}

Четвертым моментом является то, что нужно помнить про изображения. Они обязаны обладать гибкими размерами и расположением. И эти параметры должны меняться в зависимости от того, какое разрешение имеет окно в браузере интернет пользователя и где расположен родительский блок.

В заключение хотелось бы немного сказать относительно такого процесса, как организация работы. Самым простым решением является распределение всех стилей под разные устройства в разные файлы. Но если учитывать оптимизацию, рациональнее выполнить размещение всех стилей в одном файле. Однако в один файл всё можно скинуть и в самом конце работы.

Верстка адаптивная предполагает первоочередное размещение стилей под мобильные устройства. Но в верстке это нерационально. Гораздо более логичным решением будет первоочередная верстка стилей под десктоп, а после этого под мобильные устройства.

Видео: Адаптивная верстка сайтов

03.04.2014