Как работают медиазапросы, почему не работает?

Question

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

Приветствую, не могу понять как работают медиа запросы, по всем видео-урокам и статьям указывается например такой медиа запрос
@media screen and (max-width: 992px)
насколько я понимаю, этот запрос должен работать на Laptop, я захожу в Google Chrome, перехожу в редактирование кода и выше указываю эту ширину (992px) и в медиа запросе меняю все элементы так, что бы при этой ширине браузера все выглядело нормально
НО, когда я открываю сайт на ноутбуке, открывается основная Desctop версия, и выглядит она не нормально т.к она гораздо шире окна браузера.
При этом, кода я делаю запрос @media screen and (max-device-width: 1400px)
Все работает так как мне нужно
Что я делаю не так?

Comments

[Rustam Bainazarov]

Ноутбук с разрешением 992 пикселей по ширине? Это где такие есть вообще? Ноутбуки 20-летней давности и те имели 1024 пикселей обычно. Сейчас стандартный ноутбук — это 1360 пикселей и выше.

Answer 1

[Сергей delphinpro]

max-width означает "до" (включительно)
min-width означает "от" (включительно)

т.е. у вас стили применяются на ширине браузера до 992px включительно
Начиная с 993 эти стили отключаются.

max-device-width: 1400px
означает "размер дисплея до 1400". Дисплея (устройства), не браузера.

Comments

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

Я это понимаю. Как правильно верстать, с max-width или max-device-width?
Знакомый верстальщик под laptop верстает от 992 или 768px, но на моих ноутбуках на такой ширине ничего не работает, следовательно у юзеров которые будут заходить на сайт с ноутбуков тоже ничего не будет работать

[Сергей delphinpro]

Александр Волков, max-width - по размеру окна браузера
max-device-width — по размеру монитора (даже если браузер не на всю распахнут)

как верстать, зависит от необходимого результата.

Я сто лет уже не видел ноутбуков с разрешением меньше 992 пикселей. Как оно будет работать, если он больше?

Ориентируйтесь не на устройство, а на дизайн. Для просмотра используйте dev-tools.

Answer 2

[Alfieros]

@media screen and (max-width: 992px)

Нет одного и единственного решения при выстраивании адаптива. Всё зависит от дизайн-конструкции.
Данный запрос никак не относится к устройству, а лишь к разрешению экрана устройства. 992px - это примерно стандартное разрешение Laptop(Нетбук), а не Notebook(Ноутбук).
Вы должны отталкиваться от удобства просматривания контента на определенных разрешениях, а не устройствах. DevTool в хроме позволяет просматривать контент на любом девайсе(применяя разрешения экрана данного устройства).

Comments

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

Теперь понял, в голове почему-то было что 992 для ноутбуков. Ок, а для ноутбуков какая максимальная ширина, я так полагаю 1400? на ноутбуках видел разрешение 1366px

[Alfieros]

Александр Волков, сейчас у ноутбуков и 3840px разрешение. Ещё раз повторю) Вам ненужно привязываться к конкретному устройству. Вы должны ориентироваться на то, как будет отображаться данный контент в рамках от минимального до максимального разрешения устройств.
У меня к примеру диагональ 32" с разрешением в 4К. Но это же не значит, что кто-то должен подстраивать свой сайт конкретно под моё разрешение. Максимальная ширина блока контента на Тостере 1440px, и мне комфортно просматривать данный сайт в этих рамках, я смотрю на контент чётко по центру. Этого и достаточно.
Если растянуть контентую часть до моего разрешения, у меня глаза уедут в Китай.

Answer 3

[Павел]

Так у вас какое разрешение на ноутбуке? На сколько мне известно, минималка на ноутбуках 1024px

Comments

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

Пробовал на разных ноутбуках, на моем 1024, на других 1280 и 1366
Я спрашивал своего знакомого верстальщика про медиазапросы, и он сказал что break point для laptop версии = 992px для Descktop = 1200px