Почему не работают медиа запросы
Перейти к содержимому

Почему не работают медиа запросы

  • автор:

Не работает тег @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
  • Все курсы и скринкасты

Не работают медиа-запросы

Author24 — интернет-сервис помощи студентам

Я правильно понимаю вообще. Если ширина экрана,например, 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; } }

Хотя по моему разницы нет
Регистрация: 09.05.2018
Сообщений: 27

Да, это точно так.
Попробовал как вы предложили, вы правы, ничего не изменилось
Мог я написать что-то такое выше в css или html из-за чего это не работает?

1734 / 894 / 368
Регистрация: 26.11.2014
Сообщений: 1,831
Записей в блоге: 1
Масштаб страницы 100%?
Регистрация: 09.05.2018
Сообщений: 27
Ну так на любом масштабе. В инспекторе вы же имеете ввиду?
1734 / 894 / 368
Регистрация: 26.11.2014
Сообщений: 1,831
Записей в блоге: 1

ЦитатаСообщение от Govnokoder000 Посмотреть сообщение

В инспекторе вы же имеете ввиду?

Вообще, в принципе, я имею ввиду. Настройки масштаба в браузере. Отключите все стили, кроме этих запросов и погоняйте их, если будут работать, постепенно включайте другие стили.

Регистрация: 22.10.2012
Сообщений: 499
Попробуй медиа запрос так прописать
@media only screen and (max-width: 992px)

Эксперт HTML/CSS

2257 / 1641 / 646
Регистрация: 07.08.2016
Сообщений: 3,949

Govnokoder000, код работает как и положено. При 1000px фон имеет цвет #000, при 900px #2f2. Ищите проблему в других стилях

Регистрация: 20.10.2022
Сообщений: 6
Спасибо ! У меня помогло.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Не работают медиа запросы
Почему-то не работают медиа запросы. Вроде все написала правильно, но все равно где-то есть ошибка.

Не работают медиа запросы
Добрый день. Подскажите в чем может быть дело, не работают медиа-запросы. .noel-title1 < .

Не работают медиа запросы
Всем доброго времени суток. У меня возникла непонятная для меня проблема. Никогда не занимался.

Медиа-запросы не работают из подключаемых css файлов
Здравствуйте! подскажите, в чем причина: медиа запросы работают только если заданы в.

Или воспользуйтесь поиском по форуму:

Медиа-запросы не работают

Здравствуйте! Помогите, пожалуйста, советом: пытаюсь с помощью медиа-запросов отрегулировать ширину шапки и контента, но не выходит. Мне нужно, чтобы если экран устройства менее 1024 px, поля не показывались, а шапка и контент занимали 100% экрана, на широкоэкранных мониторах чтобы шапка и контент занимали 53%, остальное, соответственно, поля. Прописывала, вроде бы, правильно:

@media screen and (max-width: 1024px) < #main < width: 100%; margin: 0; padding: 0; >#header < width: 100%; margin: 0; padding: 0; >> #header < background-image: url(../images/header.jpg); width: 53%; height: 239px; background-repeat: no-repeat; padding: 0px; margin: auto; border: 1px solid #CCC; >#main

Проверяла неоднократно на устройствах с разрешением менее 1024 px — правила не работают, все равно появляются поля и контент с шапкой занимают 53 %, отчего получается тоненькая полоска (. Что я не так делаю? Может, медиа-запросы не в файл стилей нужно записывать? Как еще можно осуществить задумку? Пробовала также max-device-width, все равно не работает.

Почему не работают медиа запросы?

Prakop

как правило такое сложности возникают, когда не учитывается специфичность такого обращения к селекторам. попробуй закинуть эти свйоства в конец сss файла.

  • проверить специфичность (выше)
  • посмотреть в браузере в фаербаге, что происходит и что применяется к элементам в зависимости от обстоятельств
  • попробовать протестировать отдельные простые куски кода и посмотреть работает ли хоть чтото. Например так:

@media all and (min-width: 640px) and (max-width: 734px) < * < background: red; >>

Ответ написан более трёх лет назад
Нравится 3 2 комментария
booogabooo @booogabooo Автор вопроса
медиа работают на половину. ширина учитывается, а высота нет

knitevision1

Владик Лимонадик @knitevision1
booogabooo: что дев тулзы говорят? скрин мб какой?

seregazolotaryow64

Сергей Золотарёв @seregazolotaryow64
IT Специалист и самоучка

Пробовал применять resolution и device-width и к ним прикрепил масштабирование всего тела. Применял @media screen и @media all и подключил тег viewport . Тестирую на нетбуке и ничего не работает.

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

Бывает, когда пишешь код css через препроцессор Sass, когда какой-то элемент был не принят препроцессором, по причине ошибки в написании, последующие изменения в код не вносятся, до исправления предыдущей ошибки. Поэтому, когда пишешь media — команда не срабатывает, так как была совершена ошибка в коде до этого (система кривая, но так уж она работает). Советую воспользоваться препроцессором Prepros, он после каждого изменения указывает подтверждения правильности кода, либо указывает на ошибку.

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Можно ли убрать подчеркивание ссылки в HTML не прибегая к CSS?

  • 1 подписчик
  • 3 часа назад
  • 65 просмотров

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *