Под какие разрешения экрана верстать сайт и статистика разрешений экрана?

Question

[rattlhead]

Назрел такой вопрос - "Под какие ключевые разрешение экрана делать сайт при
Bootstrap-вёрстке?" Как я понимаю, делается под маленькие это от 320рх потом от планшеты это от 640рх и дальше до компьютерной версии это 1024 или 1366. Имеет ли смысл в 2018 году делать дизайн под 1024, или лучше пропустить это разрешение и делать сразу под 1366рх? Т.е люди с разрешение 1024 будут видеть планшетную версию сайта.
И где можно посмотреть статистку популярности разрешений на liveinternt статистика только по всем сайтам, а хотелось бы до регионов странны.
Основная проблема что все статьи и т.д написаны 2 года назад и более и как мне кажется утеряли свою актуальность.

Comments

[GavriKos]

Честно, не шарю в верстке, но мне кажется что в 2018 не имеет смысла верстать под 320, а вот под fullHD как минимум стоит. А то и под 2-4к.

[Pavlo Marchenko]

GavriKos, зачем писать мнение если не шаришь в вёрстке? 320 это ширина экрана устройства например айфон 5. Плюс теперь гугл в приоритет выдает адаптированные странички

[GavriKos]

Pavel Marchenko, потому собсно и пишу в комментариях, а не в ответах :-)

[GavriKos]

Pavel Marchenko, кстати айфон 5 уже не особо то target device по статистике.

[Владислав Лысков]

GavriKos, se тоже 320

Answer 1

[Pavlo Marchenko]

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;
}
}

Answer 2

[Владимир Варламов]

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

Вы можете посмотреть, что в данный момент предлагает как breakpoint последний bootstrap. https://getbootstrap.com/docs/4.0/layout/overview/...