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

Источник

Почему мои медиа-запросы CSS3 не работают на мобильных устройствах?

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

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

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

9 ответов

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

теперь он, похоже, работает как в Android (2.2), так и в iPhone.

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

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

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

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

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

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

Я использую несколько методов в зависимости от. В той же таблице стилей я использую: @media (max-width: 450px), или для отдельного убедитесь, что у вас есть ссылка в заголовке правильно. Я посмотрел на ваш fixmeup, и у вас есть запутанный массив ссылок на css. Он действует, как вы говорите, также на HTC desire S.

Я скопировал bootstrap 4 media queries прямо из своих документов, и каждый запрос помечен той же разметкой комментариев в стиле javascript // !

кроме того, IntelliJ text editor позволил мне комментировать определенные строки css в меньшем файле, но автоматически использовать // . Это не бесплатная программа, поэтому я предположил, что все правильно. Существует меню предпочтений для исправления этого поведения.

кроме того, проверьте свой css с надежным онлайн-валидатором. вот на В3

для меня я указал max-height вместо max-width .

Источник

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

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

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

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

ОТВЕТЫ

Ответ 1

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

Теперь, похоже, все работает на Android (2.2) и iPhone.

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

css Линия связи так же проста, как и выше.

Ответ 5

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

Ответ 6

Я скопировал bootstrap 4 медиа-запроса прямо из своих документов, и каждый запрос помечен тем же самым комментарием комментариев стиля javascript // !

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

Кроме того, проверьте ваш css с надежным онлайн-валидатором. Здесь один из W3

Ответ 7

Ответ 8

Я использую несколько методов в зависимости. В той же таблице стилей я использую: @media (max-width: 450px), или для отдельных, убедитесь, что у вас есть ссылка в заголовке правильно. Я взглянул на ваше исправление, и у вас запутался массив ссылок на css. Он действует так же, как вы говорите также о желании HTC S.

Ответ 9

Для меня я указал max-height вместо max-width .

Если это вы, поменяйте его!

Ответ 10

Это также может произойти, если уровень масштабирования браузера не является правильным. Масштаб окна вашего браузера должен быть 100%. В Chrome используйте Ctrl + 0 чтобы сбросить уровень масштабирования.

Ответ 11

Я тоже недавно столкнулся с этой проблемой, и позже узнал, что это потому, что я не поставил пробел между and и ( . Это была ошибка

Затем я изменил это на это, чтобы исправить это

Ответ 12

Бросив еще один ответ в кольцо. Если вы пытаетесь использовать CSS-переменные, он просто потерпит неудачу.

CSS-переменные не работают в медиа-запросах (по замыслу).

Ответ 13

Странная причина, которую я никогда раньше не видел: если вы используете селектор «родитель> потомок» вне медиазапроса (в Firefox 69), это может нарушить медиазапрос. Я не уверен, почему это происходит, но для моего сценария это не сработало.

Но добавление родителя, чтобы он соответствовал другому CSS дальше по странице, это работает.

Похоже, указание родителя не должно иметь значения, поскольку идентификатор очень специфичен и не должно быть никакой двусмысленности. Может быть, это ошибка в Firefox?

Источник

CSS медиа-запросы (media queries)

В этой статье мы подробно рассмотрим, что такое медиа-запросы, как они работают и как их правильно использовать, в том числе и для создания адаптивного дизайна. Разберём конструкции @media, которые используются в Bootstrap.

Что такое медиа-запросы

Медиа-запросы (media queries) – это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Медиа-запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются всеми современными браузерами (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

Медиа-запросы предназначены для создания адаптивных дизайнов. Адаптивный дизайн отличается от других тем, что он может «приспосабливаться» (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер).

Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение адаптивных дизайнов сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы.

Подключение метатега viewport к странице осуществляется так:

Синтаксис

Создание медиа-запроса начинается с ключевого слова @media после которого указывается одно или несколько условий . В качестве условия можно указывать тип устройства или требования к определённой характеристике . Требование к определённой характеристике записывается в круглых скобках .

Комбинирование нескольких условий выполняется с помощью логических операторов .

После составления @media , стили, указанные в нём, будут применяться только в том случае, когда итоговый результат вычисления условий является истинной.

Пример медиа-запроса с одним условием:

Пример медиа-запроса с комбинированием нескольких условий:

Типы устройств

В @media можно указывать определённые типы устройств :

• all – для всех;
• print – для принтеров и в режиме предварительного просмотра страницы перед печатью;
• screen – для устройств с экранами;
• speech – для программ чтения с экрана.

Например, этот @media только для экранов:

А здесь для экранов и принтеров:

Логические операторы

Логические операторы and , , (запятая), not и only предназначены для создания сложных медиа-запросов.

Оператор and используется для объединения нескольких условий. В этом случае их результат будет истинным, когда каждое из них будет истинным.

Например, следующий @media будет применяться только при выполнении всех трёх условий (это экран, width >= 1200px и ориентация landscape):

, (запятая)

Применение стилей, когда необходимо лишь выполнение одного из указанных условий, достигается посредством разделения их между собой с помощью , (запятой).

В этом примере стили будут применяться к странице в двух случаях. Когда width >= 544px или ориентация portrait .

Ключевое слово not используется для отрицания.

При использовании not с and отрицание работает для всего медиа-запроса. При этом, когда указываем not необходимо обязательно задавать тип устройства.

Например, применим стили только в том случае, когда не (экран и width >= 411px и height >= 731px) .

При использовании not в выражении с запятой он добавляет отрицание только для этой части.

Например, применим стили когда истинно следующее условие: не экран или не width >= 411px .

Ключевое слово only предназначено для того, чтобы браузеры, которые не поддерживают CSS3 медиа-запросы их игнорировали. В настоящее время это уже не актуально, поэтому использовать only не нужно.

Медиа-характеристики

При составлении условия кроме типов устройств и логических операторов можно ещё задавать требования к определённым характеристикам , которые должен иметь браузер, устройство вывода, или окружение. В некоторых источниках характеристики называют медиа-функциями.

Каждая характеристика в @media должна быть заключена в круглые скобки.

При этом применяться стили указанные в @media будут также как раньше, т.е. только в том случае, когда результат вычисления всего выражения будет являться истиной.

width

Медиа-характеристика width позволяет задать условие на равенство ширины области просмотра определённому значению.

Например, применим CSS только для viewport с шириной 320px.

Для определения диапазона можно использовать min-width и max-width .

Например, @media для ширины viewport от 576px до 1200px:

Для ширины больше 768px:

Если нужно меньше 1400px:

height

Для задания условий в отношении высоты viewport можно использовать height , min-height и max-height .

Например, @media для высоты viewport больше 720px:

orientation

С помощью orientation можно установить те или иные стили в зависимости от того, в каком режиме (альбомном или портретном) отображается сайт.

Например, в зависимости от ориентации viewport будем отображать разные картинки:

aspect-ratio

Характеристики aspect-ration , min-aspect-ratio и max-aspect-ratio позволяют задавать стили в зависимости от соотношения сторон viewport.

resolution

Характеристики resolution , min-resolution и max-resolution можно использовать, когда нужно задать стили в зависимости от плотности пикселей устройства.

Например, установим другой размер шрифта для устройств с плотностью пикселей на дюйм более 150:

Стили для печати страницы с плотностью пикселей больше 300dpi:

Медиа-запросы в
и @import

При подключении таблицы стилей можно с помощью атрибута media установить медиа-запросы и тем самым определить условия, когда они должны использоваться.

Кроме
, их также можно использовать в @import :

Медиа-запросы для Bootstrap 3

Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):

Вышеприведённые запросы необходимо использовать только в указанном порядке.

Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width . Это заставит их работать только в указанном диапазоне.

Медиа-запросы для Bootstrap 4

Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):

Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):

Перечень медиа-запросов для Bootstrap 4, которые можно использовать в таблице стилей в любой последовательности:

Код JavaScript, учитывающий параметры устройств

Наиболее простой способ создания кода JavaScript, учитывающий параметры устройств (аналогично CSS медиа-запросам), осуществляется с помощью метода matchMedia объекта window .

Осуществляется это следующим образом:

Например, эту возможность можно применить для асинхронной загрузки картинок в зависимости от того какой размер viewport имеет устройство (браузер).

Метод matchMedia не поддерживается Internet Explorer 9 и другими старыми браузерами. Для того чтобы обеспечить эту функциональность в старых браузерах можно воспользоваться методом mq библиотеки Modernizr.

Комментарии:

Добрый день!
Такой вопрос, применил в js

if (window.matchMedia(‘screen and (max-width: 543px)’).matches) <>

Всё работает, но! например, при повороте экрана на большой мобилке не отображается большое меню (а должно), плюс пользователь всегда может сжать браузер

Отсюда вопрос: как сделать так, чтобы js «слушал» изменение размера?

Это работает очень просто.

Первое CSS правило отрабатывает всегда. Оно задаёт .container 100% ширину того блока, в который он помещён и центрирует его в нём в горизонтальном направлении по центру. Если ширина viewport меньше 576px, то остальные правила не отрабатывают. В остальных правилах имеются условия, и они будут отрабатывать только в том случае, если ширина viewport бразуера пользователя будет не меньше указанной величины (min-width).

Если ширина viewport браузера пользователя больше или равно 576px и меньше 768px то к .container применятся все CSS свойства заданные в первом правиле и CSS свойство max-width: 540px. Т.к. 2 правило проходит по условию.

Если ширина viewport бразуера пользователя больше или равно 768px и меньше 992px, то к .container применятся все CSS свойства, заданные в первом правиле, max-width: 540px и max-width: 720px. Т.к. 2 и 3 правило проходит по условию. Но CSS свойство max-width: 720px расположено ниже по коду, чем CSS-свойство max-width: 540px. В результате будет применены все CSS свойства, заданные в первом правиле и max-width: 720px.

«@media (min-width)» удобно использовать, когда вы при разработке дизайна используете стратегию «Mobile First», т.е. сначала пишите стили для отображения страниц на самых маленьких экранах, затем переходите к более крупным и так далее.
В этом случае вы в самом начале пишите стили для самых маленьких устройств без использования «@media (min-width)».
Затем переходите к следующей ширине после самых маленьких устройств. На этом этапе переопределяете существующие стили, если они должны для данной ширины иметь другой вид, и при необходимости добавляете новые. Для этого вы их заключаете в «@media (min-width)».
При этом этот фрагмент стилей должен располагаться после дефолтных стилей.
Затем переходите к следующей ширине и т.д. При этом важно соблюдать порядок следования фрагментов, т.е. сначала стили без «@media (min-width)», потом, например, с использованием правила «@media (min-width: 576px)», далее с «@media (min-width: 768px)» и т.д.

Если вы проектируете, начиная с самого большого размера, то в этом случае лучше создавать наоборот. Т.е. сначала создаёте дефолтные стили, которые будут определять дизайн веб проекта на самых больших экранах. Далее переходите к более маленьким. На каждом из этих этапов вы переопределяете существующие стили, действующие на эту ширину и заключаете их в @media (max-width), чтобы их действие не распространилась на более большую ширину. Но этот вариант разработки обычно не используют, предпочитая стратегию «Mobile First.

Источник