Почему «ширина = ширина устройства» полностью не работает?

Question

У меня проблема с настройкой медиазапросов на устройствах. Это не работает вообще. Это работает как нормальная ширина. Почему это так?

<meta charset="UTF-8" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">

И вот как я это использую:

@media only screen and (min-width: 600px) {
    background-color: lightblue;
}

Answer 1

Это очень просто. Вы не поместили background-color: lightblue; в тег это должно быть что-то вроде html или body тега.

Вы также должны обновить свой метатег до

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Ваш код должен выглядеть примерно так:

html{
  background-color:red;
}
@media only screen and (min-width: 600px) {
  html{
    background-color: lightblue;
    }
}

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Если вы хотите, чтобы веб-страница стала светло-голубой, когда она меньше 600 пикселей, вы должны поменять местами два цвета

Для получения дополнительной информации вы можете пойти в w3schools , они очень четко объясняют запросы СМИ.