Какой размер подойдёт под все устройства?

Question

[Ingernirated]

Всем привет!
Подскажите, какие параметры подойдут для всех устройств в @mdeia?
Просто в статье написаны куча вариантов под каждую модель телефона или планшета, а можно это как-то объединить или дать понять, чтобы это срабатывало на всех устройствах, кроме мониторов пк и ноутбуков?

Answer 1

[Александр Талалаев]

Не морочьте себе голову берите из проверенных решений, например у Bootstrap так :

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Или в обратном порядке (указанный размер либо меньше):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Answer 2

[Владимир]

Как правило, чтобі решить задачу нужно хорошо подумать над самой задачей.
Что именно ты хочешь сделать, отделить носимые устройства от неносимых?
Как ты собрался отличить iPad Pro от єкрана ноута (2732/2048)
Собрался отличать устройства с тач интерфейсом от устройств без тача, тогда на ноутбуках, которіе поддерживают тач, у тебя будет загружаться тач версия.
Вот сайт где можно посмотреть популярные разрешения и вьюпорты (они далеко не всегда совпадают)
screensiz.es