media screen and (max-width: 1200px) <
.container <
width: 970px;
>
>

media screen and (max-width: 991px) <
.container <
width: 750px;
>
>

media screen and (max-width: 767px) <
.container <
width: 450px;
>

media screen and (max-width: 479px) <
.container <
width: 310px;
>
>

Такой подход не сделан для каких-то конкретных разрешений или устройств, а просто выбирается несколько разрешений под какие дизайнер придумает что отображать на экране. Так индустрии проще. Но правильно верстать под все разрешения. Т.е уменьшаем ширину viewport и смотрим в каждом случае какие элементы нужно на данной ширине переверстать либо скрыть.

Какое разрешения экрана самое популярное?

Часто при разработке сайта, а точнее на самой первой стадии — на создании прототипов, логики и дизайна возникает ряд вопросов, связанных с шириной контейнера или, вернее сказать, с разрешением экрана нашего потенциального пользователя.

Аксиомой в данном повествовании будет являться утверждение о том, что «экран, для которого дизайн делается изначально — будет давать пользователю самый лучший experience, а все остальные большие и меньшие экраны смогут к нему быть лишь максимально приближены»

Многие дизайнеры в работе используют старую ширину экрана в 1024 пикселя, поэтому финальная production версия проекта выглядит странно так как справа и слева остаются своеобразные поля.

Существует также несколько разрешений экранов, которые знакомы дизайнерам, но они по каким-то причинам их не используют. Например ширина в 1920, 1280 или 1366 пикселей никого не удивит — такую ширину имеют примерно 70% desktop устройств на сегодняшний день.

О них и поговорим.

Если между 1280 и 1366 разницы большой мы не увидим, то между 1920 и 1280 разница в размере будет уже довольно существенной и масштаб элементов придется подстраивать. Сделать это нужно будет либо на этапе верстки либо в самом дизайне (что реже, так как на этапе верстки за масштабирование будут отвечать формулы и автоматика). Чаще этим занимаются верстальщики, во всяком случае об этом говорит наш опыт.

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

В дальнейшем этот экран и будет адаптирован к другим desktop версиям.

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