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

Почему мои медиа-запросы 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 является довольно распространенным, поэтому я поверил в это и пошел с этим. Это сломало мой код. Есть меню настроек для обучения правильной разметке комментариев для каждого типа файла.

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

В файле styles.css я использую медиа-запросы, оба из которых используют следующие варианты:

Когда я сжимаю окно, сайты меняют размер в соответствии с макетом, который я хочу использовать в обычном браузере (Safari, Firefox), однако мобильный макет вообще не отображается на телефоне. Вместо этого я просто вижу CSS по умолчанию.

Может кто-то указать мне верное направление?

Ответы

redconservatory picture

Все три совета были полезными, но похоже, что мне нужно было добавить метатег:

Теперь вроде нормально работает и на Android (2.2), и на iPhone .

The4thIceman picture

Не забудьте разместить стандартные объявления css над медиа-запросом, иначе запрос не будет работать.

Moin Zaman picture

Я подозреваю, что здесь проблема с ключевым словом only . У меня нет проблем с использованием таких медиа-запросов:

@media screen and (max-width: 480px)

Mohsen picture

Я использовал bootstrap на сайте прессы, но он не работал в IE8, я использовал javascript css3-mediaqueries.js, но все еще не работал. если вы хотите, чтобы ваш медиа-запрос работал с этим файлом javascript, добавьте экран в строку медиа-запроса в css

css Строка ссылки так же проста, как и строка выше.

Сегодня у меня была похожая ситуация. Медиа-запрос не сработал. Через некоторое время я обнаружил, что это место после «и» пропало. Правильный медиа-запрос должен выглядеть так:

Также имеет значение последовательный порядок кода css, например:

приведенный выше код не будет работать из-за выполненного заказа. Необходимо написать следующее :

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

<meta content="width=device-width, initial-scale=1" name="viewport" />

ANURAG BHAKUNI picture

Всегда указывайте максимальную ширину и минимальную ширину в некоторых единицах измерения, таких как px или rem. Это помогло мне. Если я напишу его без единицы измерения и только числовое значение, браузер не сможет читать медиа-запросы. пример: это неправильный экран @media only и (max-width: 950), и это правильный экран @media only и (max-width: 950px)

Cameron Donahue picture

Фрагмент кода OP явно использует правильную разметку комментариев, но CSS может ломаться постепенно — поэтому, если есть синтаксическая ошибка, все, что происходит после этого, скорее всего, не сработает. Пару раз я полагался на заслуживающие доверия источники, которые предоставили неправильную разметку комментариев, которая нарушила мою таблицу стилей. Поскольку OP предоставил лишь небольшую часть своего кода, я бы предложил следующее:

Убедитесь, что все ваши комментарии CSS используют эту разметку /* . */ — это правильная разметка комментариев для CSS согласно MDN.

Подтвердите свой css с помощью линтера или безопасного онлайн-валидатора.

Дополнительная информация: я пошел, чтобы проверить последние рекомендуемые точки останова медиа-запросов из начальной загрузки 4, и в итоге скопировал шаблонную пластину прямо из их документов. Почти каждый блок кода был помечен комментариями в стиле javascript // , которые сломали мой код и дали мне только загадочные ошибки компиляции для устранения неполадок, которые в то время пролетели у меня над головой и вызвали у меня грусть.

Текстовый редактор IntelliJ позволил мне закомментировать определенные строки css в файле LESS, используя горячую клавишу ctrl + /, что было здорово, за исключением того, что он по умолчанию вставляет // в нераспознанные типы файлов . Это не бесплатное программное обеспечение, и оно не является достаточно распространенным, поэтому я доверился ему и пошел с ним. Это нарушило мой код. Есть меню настроек для обучения правильной разметке комментариев для каждого типа файла.

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

У меня есть обычная верстка и на ней работают медиа-запросы, но потом я верстку натянул на opencart и там медиа-запросы не работают.

&#x417;&#x43D;&#x430;&#x435;&#x442;&#x435; &#x43A;&#x43E;&#x433;&#x43E;-&#x442;&#x43E;, &#x43A;&#x442;&#x43E; &#x43C;&#x43E;&#x436;&#x435;&#x442; &#x43E;&#x442;&#x432;&#x435;&#x442;&#x438;&#x442;&#x44C;? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

Посмотрите другие вопросы с метками css opencart или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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