Почему не работает media css
Перейти к содержимому

Почему не работает media css

  • автор:

Не работают @media теги в css, при адаптивной верстке, в чем проблема?

Добрый день! Столкнулся с очень интересной проблемой. Которую уже решил, но все же) Суть проста — не работал (и не работает) тег @media в CSS. При чем только в той конфигурации в какой он был описан в 61 уроке. С min/max-device-width. Решение вопроса нашел тут же на форуме и выглядит оно так: @media only screen and (max-width: 568px) <
.header <
background-color: #257965;
>
> Стало интересно почему эта запись работает, а продемонстрированная в уроке нет. Прочитав несколько статей про адаптивную верстку — была обнаружена другая интересная особенность) В примере выше я указал max-width(1), но допускается и написания max-device-width(2). Разница между ними в том, что первая задает максимальную ширину окна браузера, а вторая максимальную ширину экрана устройства, без привязки к браузеру. И первая запись у меня работает, а вторая нет)) И собственно вопросы. Почему так? Это проблема эмулятора Хрома? Он не способен полностью эмулировать устройство? И все же как правильнее делать? С написанием max/min-device-width и проверять на реальном смартфоне? Или max/min-width и не парится, проверяя все в эмуляторе браузера?

2 ответов

Нужно проверить, что viewport есть в html странице. Эмуляторы в браузере часто глючат, нужно их несколько раз обновлять (лучше сбрасывая Cache у браузера обновлять через ctrl + f5). Еще исходный код стоит скачивать, если что-то не получается и его запускать, потом сравнивать со своим кодом.

viewport есть в html странице. Это я проверил в первую очередь. Касательно браузера: и сбрасывал кеш, и обновлял через ctrl + f5, я даже полностью переустановил Хром. Ну а теперь самое не объяснимое — исходный код работает. Я сначала запустил отдельно его работает. Потом, закомментировал все свои CSS стили и скопировал туда стили из исходника. И все заработало! Дальше я удалил все стили из media оставив такую запись: @media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) < .header background-color: #257965;
> > И она тоже работает. Я сравнил ВСЕ! Ни одной ошибки, ни одной разбежности! Все как в курсах. Но в исходнике эта запись работает, а точно такая же но написанная мной — нет!

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

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

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

Как быстро менять ссылки Django?

  • 1 подписчик
  • 49 минут назад
  • 20 просмотров

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

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