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

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

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

max-device-width: 1400px
означает "размер дисплея до 1400". Дисплея (устройства), не браузера.
Ответ написан
mrsexy
@mrsexy
Senior Pomidor
@media screen and (max-width: 992px)

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы