Медиа-запрос CSS на Full HD (1920px) действует как другой

Рассмотрим следующий код:

header {
    height: 60px;
    background: red;

    @media (max-width: 1650px) {
        background: blue;
    }
}

Я работаю с ноутбуком, подключенным к Full HD (1920 x 1080) Разрешение экрана/монитора Когда я смотрю на веб-страницу с подключенным экраном, заголовок имеет красный фон, поэтому он не реагирует на разрешение 1650 пикселей. медиазапрос.

Когда я отключаю свой ноутбук (скажем, после того, как я перезапущу его, чтобы сбросить настройки экрана) и открою веб-страницу, я узнаю, что фон заголовка теперь синий — это означает, что он отвечает на медиа-запрос 1650px.

Мой вопрос: мой ноутбук имеет разрешение 1920 (не подключен к экрану), но отвечает на медиа-запрос 1650px, почему это происходит? Я предполагаю, что веб-страница будет отображаться так же, как когда мой ноутбук подключен к экрану, это то же разрешение.

Спасибо


css responsive-design sass media-queries resolution
person Omer Morad    schedule 13.12.2016    source источник
comment
Дважды проверьте разрешение экрана и настройки дисплея.   -  person andi    schedule 13.12.2016

Ответы (2)


arrow_upward
0
arrow_downward

Потому что в вашей системе есть масштаб интерфейса для экрана ноутбука, который программно делает его шириной где-то 1400 пикселей, но картинка продолжает рендериться в 1920.

person Mr. Grump    schedule 14.03.2018

arrow_upward
-2
arrow_downward

Ваш Media Query не может быть внутри стиля для .header, скобки закрыты неправильно.

Используйте это:

header {
    height: 60px;
    background: red;
}

@media (max-width: 1650px) {
    header {
        background: blue;
    }
}
person Johann Kratzik    schedule 13.12.2016
comment
OP использует SASS, который позволяет использовать вложенные селекторы и медиа-запросы. - person Kyle; 13.12.2016