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

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

  • автор:

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

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

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Войти

Уже зарегистрированы? Войдите здесь.

Больше способов поделиться.

Сейчас на странице 0 пользователей

  • Нет пользователей, просматривающих эту страницу.

Покупцям

  • Оплата розширень фізичними особами
  • Оплата розширень юридичними особами
  • Політика повернень

Розробникам

  • Регламент розміщення розширень
  • Регламент продажу та підтримки розширень
  • Віртуальний обліковий запис автора
  • Політика просування оголошень
  • API каталогу розширень
  • Вирішення спорів щодо авторських прав

Корисна інформація

  • Публічна оферта
  • Політика повернень
  • Політика конфіденційності
  • Платіжна політика
  • Політика передачі особистих даних
  • Політика прозорості

Останні розширення

Движок интернет магазина OpenCart (ocStore) — официальный сайт OpenCartForum.com Powered by Invision Community

  • Уже зарегистрированы? Войти
  • Регистрация
Раздел покупок
ocStore
  • Назад
  • Официальный сайт
  • Демо ocStore 3.0.3.2
  • Демо ocStore 2.3.0.2.4
  • Скачать ocStore
  • Документация
  • История версий ocStore
Шаблоны
OpenCart.Pro
  • Создать.

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.

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

SmthTo

Зачем дублировать селектор внутри вложенности. Вы хоть смотрите, что компилируется, тогда вопросы отпадут.

.descriptions__content < display: flex; justify-content: space-around; @media (max-width: 1424px) < flex-direction: column; >>

justifycontent @justifycontent Автор вопроса
Рустам Байназаров, Не работает
justifycontent @justifycontent Автор вопроса
Рустам Байназаров, Я пробовал так
Решения вопроса 1

profesor08

profesor08 @profesor08 Куратор тега CSS
Если ширина страницы 0 — 1424px то будут применены правила. Иначе нет. Твой код превратится в

.descriptions__content < display: flex; justify-content: space-around; >@media (max-width: 1424px) < .descriptions__content .descriptions__content < flex-direction: column; >>

Если свойства не применяются, значит правила не соответствуют разметке html.

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

Здравствуйте! Помогите, пожалуйста, советом: пытаюсь с помощью медиа-запросов отрегулировать ширину шапки и контента, но не выходит. Мне нужно, чтобы если экран устройства менее 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, все равно не работает.

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

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