Блог

Со страницей, над которой я работаю, происходит что-то странное. Мне нужен определенный стиль, когда устройство имеет меньшее разрешение, чем ширина 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;
    }
 

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

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

 #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">