Chrome Dev инструменты чтит медиазапросы, но браузер не

Question

У меня есть медиа-запросы в файле CSS набор из 0-500px и 501-1250px и так далее ...

Мои CSS контрольные точки работают отлично на экране эмулятора в инструментах разработчика Chrome, когда у меня есть «Emulate Mobile» на вкладке «эмуляция». Если это не проверено или когда я просматриваю его в браузере без открытия инструментов dev, он не соблюдает точки останова.

Точки останова также отлично работают в режиме «Отзывчивого дизайна» Firefox, но не в обычном браузере, когда я закрываю инструменты dev.

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

вот видео моего экрана, демонстрирующее проблема:

https://youtu.be/_FBoDek0Ou0

Answer 1

После просмотра видео, запросы СМИ похожи на вопрос. Вы проверяете ширину устройства, которое браузер видит как ПОЛНЫЙ РАЗМЕР вашего экрана, а не ширину браузера.

Попробуйте написать им, как это:

@media all and (min-width: 1251px) and (max-width: 2600px) { 
    */ code here /* 
} 

Обратите внимание, что это проверка только для min-width, а не min-device-width.

Я предлагаю вам также прочитать: https://css-tricks.com/css-media-queries/ и http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/, чтобы получить больше информации о том, как они работают.