Не работает тег @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 есть строка
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 обновлять.
Sign up or Log in to write an answer
- Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.
Общие ссылки
- Отзывы
- Политика конфидециальности
- Условия использования
- Блог
- Цена и оплата
- Курсы и скринкасты
- Сертификаты
- Партнерская программа
- Комьюнити
Наши курсы и скринкасты
- HTML/CSS Advanced
- Bootstrap 4
- Vue JS
- Linux, GIT and web-hosting
- HTML and CSS
- Modern Javascript
- Javascript/jQuery
- Codeigniter
- Все курсы и скринкасты
Не работают медиа-запросы
Я правильно понимаю вообще. Если ширина экрана,например, 900, то фон должен быть #2f2f, если 1000 — #000?
Смотрю в инспекторе кода: при 900 — #000, при 1000 — цвет по дефолту(аля белый), #2f2f начинает работать на 744px.
В чем может быть проблема?
P.S. в html строка
meta name="viewport" content = "width=device-width, initial-scale = 1">
прописана. Все запросы пишу в конце css файла.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Не работают медиа-запросы
Доброго времени суток, уважаемые. Во время адаптивной верстки через медиа-запросы столкнулся с.
Не работают медиа-запросы
Код HTML: <!DOCTYPE html> <html> <head> <title>Новый препарат </title> <link.
Не работают медиа запросы
Здравствуйте! Помогите новичку, пожалуйста! Есть сайт не responsive. Клиент захотел, чтобы на.
238 / 161 / 67
Регистрация: 18.06.2016
Сообщений: 509
Сообщение от Govnokoder000 
Я правильно понимаю вообще. Если ширина экрана,например, 900, то фон должен быть #2f2f, если 1000 — #000?
Сообщение от Govnokoder000
Смотрю в инспекторе кода: при 900 — #000, при 1000 — цвет по дефолту(аля белый), #2f2f начинает работать на 744px.
Это точные подсчеты?)) Токо что проверил у себя все работает как надо
1 2 3 4 5 6 7 8 9 10 11
@media (min-width: 992px) and (max-width: 1200px){ .header{ background: #000; } } @media (max-width: 991.9px){ .header{ background: #2f2f; } }
Почему не работают медиа запросы?
как правило такое сложности возникают, когда не учитывается специфичность такого обращения к селекторам. попробуй закинуть эти свйоства в конец сss файла.
- проверить специфичность (выше)
- посмотреть в браузере в фаербаге, что происходит и что применяется к элементам в зависимости от обстоятельств
- попробовать протестировать отдельные простые куски кода и посмотреть работает ли хоть чтото. Например так:
@media all and (min-width: 640px) and (max-width: 734px) < * < background: red; >>Ответ написан более трёх лет назад
Нравится 3 2 комментария
booogabooo @booogabooo Автор вопроса
медиа работают на половину. ширина учитывается, а высота нет
Владик Лимонадик @knitevision1
booogabooo: что дев тулзы говорят? скрин мб какой?
Сергей Золотарёв @seregazolotaryow64
IT Специалист и самоучка
Пробовал применять resolution и device-width и к ним прикрепил масштабирование всего тела. Применял @media screen и @media all и подключил тег viewport . Тестирую на нетбуке и ничего не работает.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Бывает, когда пишешь код css через препроцессор Sass, когда какой-то элемент был не принят препроцессором, по причине ошибки в написании, последующие изменения в код не вносятся, до исправления предыдущей ошибки. Поэтому, когда пишешь media — команда не срабатывает, так как была совершена ошибка в коде до этого (система кривая, но так уж она работает). Советую воспользоваться препроцессором Prepros, он после каждого изменения указывает подтверждения правильности кода, либо указывает на ошибку.
Ответ написан более двух лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
- +3 ещё
Почему Django не находит изображения?
- 1 подписчик
- 2 часа назад
- 13 просмотров
Не работает media запрос.
Возникла ошибка при адаптации сайта. В панели разработчика media (max-width 1200px) отоброжается , но перечеркнуто .Пробовал во всех блоках.
Pulse Официальный представитель Garmin, Polar, Suunto +7 (499) 922-89-74 Подбор пульсометра с учётом Вашего уровня подготовки 
Время подбора: 10 минут 
Бесплатная доставка 
Ответим на все вопросы