Почему не работают медиа запросы?
как правило такое сложности возникают, когда не учитывается специфичность такого обращения к селекторам. попробуй закинуть эти свйоства в конец сss файла.
- проверить специфичность (выше)
- посмотреть в браузере в фаербаге, что происходит и что применяется к элементам в зависимости от обстоятельств
- попробовать протестировать отдельные простые куски кода и посмотреть работает ли хоть чтото. Например так:
По каким причинам могут не работать меди запросы?
Почему могут не работать медиа запросы? Делаю все как положено: сами запросы всегда идут в конце документа, написаны без ошибок @media screen and (max-width: 1200px) <> уже даже пробовал подключать их отдельным файлом после основного. Но все равно на указанных разрешениях они не то чтобы не применяются а их в принципе нет.
Здесь ваш код работает, поскольку здесь на сайте добавлен <meta name=»viewport» content=»width=device-width, initial-scale=1″> .
Вот два примера можете на голом html файле посмотреть.
Первый использованием meta viewport и с ним media запросы работают нормально.
Это скрин с viewport
А второй пример вот так, просто уберем <meta name=»viewport» content=»width=device-width, initial-scale=1″> , и уже media запрос не работает.
А это без viewport :
Здесь подробно описано про viewport.
Ну надо же так? )))) Вы написали так @media screen and(max-width: 992px) , а надо вот так @media screen and (max-width: 992px) , пробел после and
Не работают @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 и не парится, проверяя все в эмуляторе браузера?
@media screen — не всегда работает — Вопросы по CSS
Данная версия знаменует собой важную веху в разработке продукта. Из нововведений: множество улучшений, обеспечение повышенной производительности и расширенные функциональные возможности.
WT Revars insert
Плагин кнопки редактора для вставки шорт-кодов, созданных с помощью плагина Revars.
Статья «Как создать плагин для Joomla 4 для авторизации пользователя по email» (How to Create a.
Статья «Как создать плагин для Joomla 4 для авторизации пользователя по email» (How to Create a Joomla 4 Plugin to Allow User Login with Email)