Не работает тег @media, как исправить?
Hmtl/css, урок 61. Написал все как в видеоуроке, но в мобильном режиме браузера не меняется цвет фона .header. Пробовал и Оперу, и Хром, последние версии.
/* CSS Moblie */
@media only screen
and(min-device-width: 320px)
and(max-device-width: 568px) {
.header{
background-color: red;
}
}В Index.html есть строка
<meta name="viewport" content="width=device-width,initial-scale=1">
5 ответов
Вот так работает(в нашем случае, цвет будет меняться если ширина экрана менее 568 пикселей):
@media only screen and (max-width: 568px) {
.header {
background-color: #257965;
}
}
В мобильном режиме выбирал iphone5, там выставлено по умолчанию как раз 320*568, все как в видеоуроке.
Нашел, между and и открывающей скобкой не стоят пробелы. Хотя опять же про такие нюансы стоит говорить в видеоуроке, потому что sublime text разметку кода в данном случае показывает правильно. Да и в других местах, например после объявления класса и скобкой { пробел неважен, а тут критичен оказывается.
Пробовал и Оперу, и ХромВ каком разрешении?
Вот от сюда попробуй скачать исходный код и посмотреть:
https://fructcode.com/ru/courses/html-and-css/responsive-complete/
Наверное в верстке где-то ошибка, может в css файле не стоит ; какая-то или скобка или размер. Бывает еще, что браузер показывает старые результаты, нужно через ctrl и f5 обновлять.