Почему не переключаются стили?

Question

[toster23]

<style id="R8639" disabled="false" media="screen and (min-width:0px) and (max-width:222px)">body { background-color: hsl(65,20%,70%); } </style>

<style id="R6021" disabled="false" media="screen and (min-width:223px) and (max-width:4000px)">body { background-color: hsl(285,20%,70%); } </style>

стили должны переключаться при изменении ширины экрана
где ошибка?

Answer 1

[Сергей delphinpro]

Всё вы сделали правильно. И всё прекрасно работает.
https://codepen.io/delphinpro/pen/WNyoEGX

Answer 2

[thekunichka]

Довольно странно писать css код в html
Ну для начала рекомендую проверить наличие нужного мета-тега в head страницы:

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

У вас не верный синтаксис: тег, для которого будут применяться стили, должен входить в фигурные скобки медиа-запроса, ваш код должен выглядеть вот так:

<style id="R8639" disabled="false" media="screen and (min-width:0px) and (max-width:222px)"> {body { background-color: hsl(65,20%,70%); }} </style>
<style id="R6021" disabled="false" media="screen and (min-width:223px) and (max-width:4000px)"> {body { background-color: hsl(285,20%,70%); }} </style>

И всё-таки настоятельно рекомендую писать код стилей, особенно медиа-запросы, в css файлах.

@media screen (min-width: 0px) and (max-width: 222px) {
    body {
        background-color: hsl(65,20%,70%);
    }
}

@media screen (min-width: 223px) and (max-width: 4000px) {
    body {
        background-color: hsl(285,20%,70%);
    }
}

Comments

[toster23]

мне нужно чтобы всё было внутри SPA

где ты такому синтаксису научился?
я погуглил про тег style - нет нигде такого, лишних скобок

[toster23]

дополнительные фигурные скобки не помогли

и второй код тоже не заработал - вставил его в head

[toster23]

мне надо понять чо не так с моим синтаксисом - раньше всё работало и вдруг на те

[thekunichka]

Если делаете spa, тогда пробуйте подключать медиа-запросы через link или импорт:

<link rel="stylesheet" media="screen and (condition) and (condition)" href=".../example.css">

@import url(example.css) screen and (condition) and (condition);

[Сергей delphinpro]

thekunichka,

И всё-таки настоятельно рекомендую писать код стилей, особенно медиа-запросы, в css файлах.

С технической точки зрения эти рекомендации ничем не обоснованы.
Стили прекрасно работают и в разметке в теге style.
Тег style вполне может содержать атрибут media с условием применения этих стилей.