С каждым годом трафик с мобильных устройств растет и со временем превысит его. Уже сейчас, одним из требованием в ТЗ на разработку сайта является адаптивный дизайн под разные типы устройств. Поэтому до сборки сайта нужно подумать о представлении контента таким образом, чтобы он был ориентирован и на мобильную аудиторию.

Адаптивные дизайны (responsive designs) адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты.

При создании адаптивного дизайна важно с самого начала определиться, на какие устройства и размеры экранов ориентирован разрабатываемый сайт. Мы должны выбрать устройства для адаптивной верстки: компьютеры, ноутбуки, планшеты и смартфоны. Кроме того, в пределах диапазонов ширин экранов для каждого из выбранного класса устройств мы должны определить, как будет работать адаптивная верстка – какие разрешения учитывать, а какие пропустить. Существует довольно большое многообразие возможных форматов экранов для каждого из видов устройств, но это не значит, что вы должны обязательно использовать их все. Достаточно выбрать лишь несколько наиболее распространённых форматов экранов для адаптивной вёрстки.

Вот несколько сниппетов для адаптивной верстки, в котором расписаны наиболее распространенные размеры дисплеев:

1. Смартфоны (Портрет и ландшафтный)

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

2. Смартфоны (ландшафтный)

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

3. Смартфоны (portrait)

   @media only screen and (max-width : 320px) {}

4. iPads (Портрет и Ландшафтный)

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

5. iPads (Ландшафтный)

   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}

6. iPads (Портрет)

   @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

7. Настольные компьютеры и ноутбуки

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

8. Большие экраны

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

9. iPhone 4

   @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {}

Для тестирования разрабатываемого сайта можно воспользоваться web-сервисами:

1. http://mattkersley.com
2. http://www.responsinator.com

Пояснение

1. @media only screen – только для экранов монитора;
2. min-width – условие “истина”, когда ширина окна браузера больше установленного значения;
3. max-width – условие “истина”, когда ширина окна браузера наоборот меньше установленного значения;
4. min-device-width – условие “истина”, когда размер экрана устройства больше установленного значения;
5. max-device-width – условие “истина”, когда размер экрана устройства меньше установленного значения;