CSS медиа-запрос перезаписывает стиль страницы, даже в более низких разрешениях - PullRequest
Новая
       14

CSS медиа-запрос перезаписывает стиль страницы, даже в более низких разрешениях

0 голосов
/ 13 апреля 2019

Что-то странное происходит со страницей, над которой я работаю.Мне нужен определенный стиль, когда у устройства разрешение меньше 600 пикселей в ширину, и другой, когда экран больше.Проблема в том, что на странице отображается стиль медиазапроса, даже когда разрешение ниже.Есть идеи, почему это может произойти?Я не думаю, что я делаю что-то не так 

#logo{
    width: 605px;
    height: 243px;
    background-image: url(images/move_filled_sm_X1.png);
    background-repeat:no-repeat;
    background-size: 100%;
}
#bars{
    width: 87px;
    height: 93px;
    margin-top: 90px;
    background-image: url(images/bars-solid.svg);
    background-repeat: no-repeat;
    background-size: 100%;
}

@media (min-width: 600px) {
    #logo{
        width: 409px;
        height: 164px;
    }
    #bars{
        width: 60px;
        height: 64px;
        margin-top: 67px;
    }

1 Ответ

0 голосов
/ 13 апреля 2019

То, как вы написали код, будет отображать часть над медиа-запросом для экранов шириной менее 600 пикселей.Но для экранов шириной 600px и более ТАКЖЕ применяет стили внутри медиазапроса:

ПРИМЕР, что будет использоваться для экрана 600px и выше: 

#logo{
    //width: 605px;
    //height: 243px;
    background-image: url(images/move_filled_sm_X1.png);
    background-repeat:no-repeat;
    background-size: 100%;
    // Overwritten due to media query
    width: 409px;
    height: 164px;
}
#bars{
    //width: 87px;
    //height: 93px;
    //margin-top: 90px;
    background-image: url(images/bars-solid.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    // Overwritten due to media query
    width: 60px;
    height: 64px;
    margin-top: 67px;
}

Если вы не используетеЕсли вы не хотите этого, вы также можете обернуть первое в медиа-запрос.

Вы использовали это?<meta name="viewport" content="width=device-width, initial-scale=1">

...