По каким причинам могут не работать меди запросы?
Почему могут не работать медиа запросы? Делаю все как положено: сами запросы всегда идут в конце документа, написаны без ошибок @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 и не парится, проверяя все в эмуляторе браузера?
Почему мои медиа-запросы CSS3 не работают?
В файле styles.css я использую медиазапросы, в обоих из которых используется вариант:
Когда я уменьшаю окно, сайты меняют размер до нужного мне макета в обычном браузере (Safari, Firefox), однако макет мобильного телефона вообще не отображается на телефоне. Вместо этого я просто вижу CSS по умолчанию.
Может кто-то указать мне верное направление?
Все три из них были полезными советами, но, похоже, мне нужно было добавить метатег:
Теперь все работает на Android (2.2) и iPhone .
Не забудьте иметь стандартные объявления CSS над медиа-запросом, иначе запрос также не будет работать.
Я подозреваю, что ключевое слово only может быть проблемой здесь. У меня нет проблем с использованием медиа-запросов, как это:
@media screen and (max-width: 480px)
Я использовал загрузчик на пресс-сайте, но он не работал на IE8, я использовал css3-mediaqueries.js javascript, но все еще не работал. если вы хотите, чтобы ваш медиа-запрос работал с этим файлом javascript, добавьте экран в строку медиа-запроса в css
css Линия связи такая же простая, как и над строкой
Сегодня у меня была похожая ситуация. Медиа-запрос не работает. Через некоторое время я обнаружил, что пробел после «и» пропал. Правильный медиа-запрос должен выглядеть так:
Последовательный порядок кода CSS также имеет значение, например:
приведенный выше код не будет работать, потому что выполнен заказ. Нужно написать следующим образом:
Всегда упоминайте max-width и min-width в некоторых единицах, таких как px или rem. Это понял для меня. Если я напишу это без единицы и только числового значения, браузер не сможет прочитать медиа-запросы. пример: это неправильный экран @media only и (max-width: 950) и правильный экран @media only и (max-width: 950px)
Бросив еще один ответ в кольцо. Если вы пытаетесь использовать переменные CSS, то это тихо завершится неудачей.
Переменные CSS не работают в медиа-запросах (по замыслу).
Странная причина, которую я никогда раньше не видел: если вы используете селектор «родитель> потомок» вне медиазапроса (в Firefox 69), это может нарушить медиазапрос. Я не уверен, почему это происходит, но для моего сценария это не сработало .
Но добавление родителя, чтобы он соответствовал другому CSS дальше по странице, это работает .
Похоже, указание родителя не должно иметь значения, поскольку идентификатор очень специфичен и не должно быть никакой двусмысленности. Может быть, это ошибка в Firefox?
Фрагмент кода OP явно использует правильную разметку комментария, но CSS может прогрессировать постепенно — поэтому, если есть синтаксическая ошибка, все после этого может потерпеть неудачу. Пару раз я полагался на заслуживающие доверия источники, которые предоставили неправильную разметку комментариев, которая сломала мою таблицу стилей. Так как ОП предоставил лишь небольшой раздел их кода, я бы предложил следующее:
Убедитесь, что все ваши комментарии CSS используют эту разметку /* . */ — которая является правильной разметкой комментариев для CSS согласно MDN
Подтвердите свою CSS с помощью линтера или безопасного онлайн-валидатора. Вот один из W3
Больше информации: я пошел, чтобы проверить последние рекомендованные точки останова медиазапроса с начальной загрузки 4, и закончил копированием пластины котла прямо из их документов. Почти каждый блок кода был помечен комментариями в стиле javascript // , что нарушало мой код — и давало мне только загадочные ошибки компиляции, с которыми приходилось устранять неполадки, которые в тот момент вызывали у меня головокружение.
Текстовый редактор IntelliJ позволил мне закомментировать определенные строки CSS в файле LESS с помощью сочетания клавиш Ctrl + /, что было здорово, за исключением того, что он вставлялся // по умолчанию для нераспознанных типов файлов . Это не бесплатная программа, а less является довольно распространенным, поэтому я поверил в это и пошел с этим. Это сломало мой код. Есть меню настроек для обучения правильной разметке комментариев для каждого типа файла.