С каждым годом трафик с мобильных устройств растет и порой уже превышает ПК трафик на некоторых ресурсах. На данный момент одним из требованием в тематическом задании на разработку сайта является адаптивный дизайн под различные типы устройств. Поэтому до сборки сайта следует подумать о представлении контента так, чтобы он был ориентирован и на мобильных юзеров.
Адаптивные дизайны (responsive designs) адаптируются к разным размерам экрана, для обеспечения подходящего отображения для различных видов устройств, таких как смартфоны или планшеты.
При создании адаптивного дизайна важно сначала определиться, на какие устройства и размеры экранов ориентирован разрабатываемый ресурс. Вы должны выбрать устройства для адаптивной верстки: компы, ноуты, планшеты и телефоны. Кроме этого, в пределах диапазонов ширины экранов для каждого из выбранного класса устройств вы должны определить, как будет работать адаптивная верстка – какие разрешения учитывать, а какие пропустить. Существует довольно большое многообразие возможных форматов экранов для каждого из видов устройств, но это не значит, что вы должны использовать их все. Можно выбрать лишь несколько наиболее распространённых форматов экранов для адаптивной вёрстки.
Вот несколько сниппетов для адаптивной верстки, в котором расписаны наиболее распространенные размеры дисплеев:
Смартфоны (Портрет и ландшафтный)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
Смартфоны (ландшафтный)
@media only screen and (min-width : 321px) {}
Смартфоны (portrait)
@media only screen and (max-width : 320px) {}
iPads (Портрет и Ландшафтный)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
iPads (Ландшафтный)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
iPads (Портрет)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
Настольные компьютеры и ноутбуки
@media only screen and (min-width : 1224px) {}
Большие экраны
@media only screen and (min-width : 1824px) {}
iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {}
Для тестирования разрабатываемого ресурса можно воспользоваться онлайн-сервисами:
http://mattkersley.com
http://www.responsinator.com
Пояснение
- @media only screen — только для экранов монитора;
- min-width — условие «истина», когда ширина окна браузера больше установленного значения;
- max-width — условие «истина», когда ширина окна браузера наоборот меньше установленного значения;
- min-device-width — условие «истина», когда размер экрана устройства больше установленного значения;
- max-device-width — условие «истина», когда размер экрана устройства меньше установленного значения;
