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

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

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

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

10 комментариев

  1. В статье отображена основная информация, все кратко и без «воды». Спасибо!

  2. Без слова device можно прописывать для 1. Смартфоны (Портрет и ландшафтный? Просто так: (min-width : 320px) and (max-width : 480px)

  3. Здравствуйте, не подскажете как в 2020 году делать картинки, а именно обтекание. Допустим на мониторе 1920х1080 вставляем картинку в 380px, и вокруг нее обтекание, ширина 750px контентной части, но если смотреть через devices toolbar и сужать ширину, то получается очень печальное обтекание текста вокруг картинки 380px из 1 слова или даже букв. Т.е. не стоит в 2020 делать обтекание картинок или плагин есть какой (движок вопрдпресс)? 🙂

  4. Я правильно понимаю, что достаточно сделать 320, 720, 1140, согласно официальной сетке bootstrap ? 960 и 540 можно не делать ? Поправьте меня, пожалуйста, если я не прав, или подтвердите.

  5. Вся таки возникает путаница какой размер должен быть 1140 или 1170. В этом вопросе возникает путаница, или раньше было 1170, а теперь 1140 ? Не понимаю этого. Или не принципиально ?

  6. iPads (Портрет):
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

    Настольные компьютеры и ноутбуки:
    @media only screen and (min-width : 1224px) {}

    А между 1024px и 1224px разве ничего не должно быть ? Если да то почему ?

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

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