Размеры экранов для адаптивной верстки

Адаптивный дизайн сайта

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

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

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

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

  1. Смартфоны (Портрет и ландшафтный)
  2. Смартфоны (ландшафтный)
  3. Смартфоны (portrait)
  4. iPads (Портрет и Ландшафтный)
  5. iPads (Ландшафтный)
  6. iPads (Портрет)
  7. Настольные компьютеры и ноутбуки
  8. Большие экраны
  9. iPhone 4

Для тестирования разрабатываемого сайта можно воспользоваться 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 — условие «истина», когда размер экрана устройства меньше установленного значения;

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *