Конкретное разрешение для media

152
19 октября 2018, 12:50

Как в правиле @media указывать конкретное разрешение,а не только ширину окна? Хочу адаптировать для отдельных девайсов,но не могу понять как

Answer 1

В большинстве случаев подходит такие варианты (от Bootstrap'a):

// Самые маленькие устройства (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Маленькие устройства (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Средние устройства (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// Большие устройства (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

Или еще такой вариант (если нужен какой то один конкретный он подойдет больше):

// Самые маленькие устройства (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Маленькие устройства (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Средние устройства (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Большие устройства (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Самые большие устройства (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

В head добавьте:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

На самом деле вариантов огромное количество, зависит от устройства, Можете найти его здесь

READ ALSO
Адаптивные ряды и строки в CSS

Адаптивные ряды и строки в CSS

На большом экране у меня должно 6 элеметов в ряд, а на мобильных экранах по одному элементу, но выводится по другомуКак мне исправить данный...

140
Не скролится по ссылке в лендинге

Не скролится по ссылке в лендинге

Сделал менюшку в шапке, создал обычные ссылки которые ссылаются к id блоку, но при нажатии скролл не срабатывает и оно просто листается в самый...

133
Webstorm live edit не реагирует на изменение внешнего css

Webstorm live edit не реагирует на изменение внешнего css

При дебаге, страница реагирует только на изменение в html файлеМожно ли как нибудь настроить ide так чтобы она читала подключенные стили в live режиме?

163
Как настроить плагин viewerjs? [закрыт]

Как настроить плагин viewerjs? [закрыт]

Как сделать так, чтобы модальное окно плагина закрывалось, когда ты нажимаешь только на крестик, а не на области?

151