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


183

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

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

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

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


3
Какой это мобильный телефон? Media Queries - это новая функция в CSS, не все браузеры мобильных телефонов поддерживают ее ...
Sparky

1
iPhone 4 и я также тестируем на телефоне Android (2.2 Froyo) с разрешением 320 x 480.
красная консерватория

На самом деле я переключился на следующий медиазапрос на iPhone 4, и он работает (но я должен изменить свой CSS, чтобы приспособить его к более высокому разрешению) @media only screen и (-webkit-min-device-pixel-ratio: 2) {}
Красная Консерватория

Я наконец понял, что мне не хватает pxв @media (max-width: 320px).
Райан

в моем случае это было из-за того, что консоль разработчика Chrome была открыта, следовательно, высота была не тем, о чем я думал
Rabolf

Ответы:


477

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

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

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


60
На самом деле <meta name = "viewport" content = "width = device-width, initial-scale = 1">
Лукас Лукач

4
8 лет спустя, и это все еще полезно. Я также пропустил метатег и не смог заставить медиа-запросы работать в проекте. Viewport тегов и бац, она работает
Sowhat

1
9 лет спустя, все еще так полезно. Не могу поверить, что я это
подделывал

@LukasLukac почему это?
Jonesopolis

68

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

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

6
Фактически, ваши CSS-стили могут быть расположены в порядке убывания от стандартного до наименьшего размера. Правила все еще применяются, если у вас есть медиа-запросы все в одном файле.
Фил Эндрюс

1
Работает для меня, даже если у меня нет стандартного объявления CSS для указанного класса.
Мейсон

Это решило мою проблему. Большое спасибо ... Я упустил возможность перезаписи моего CSS.
pmcg521

21

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

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


20

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

вот пример:

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css Линия связи такая же простая, как и над строкой


12

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

@media screen and (max-width: 1024px) {}

1
Вот почему у нас есть CSS-валидаторы. Это не относится к данной конкретной проблеме, поскольку OP уже указывает, что медиазапросы действительно работают в не-мобильных браузерах.
Cimmanon

4
Все еще нашел это полезным, так как это была проблема в моем случае
Лорен Шкипогня

4

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

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

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

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

Это ошибка, которую я сделал. Спасибо.
VorganHaze

4

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


Спасибо! Хотя я просматривал все примеры, я никогда не замечал, что забыл px!
Марканд

2

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

@media screen and (max-device-width: var(--breakpoint-small)) {}

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


2

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

@media whatever {
    #child { display: none; }
}

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

#parent > #child { display: none; }

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


2

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

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

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

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

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


1
OP уже использует правильную разметку комментария, как показано в посте .
TylerH

На самом деле, если вы наведите курсор мыши на кнопку понижающего голоса, вы увидите , для чего они предназначены . Кроме того, отрицательные голоса являются 1) анонимными и 2) не троллингом. Кроме того, пламя кого-то не способ заставить их изменить то, что, как вы думаете, они сделали.
TylerH

Боже мой! Ты спас мой день.
Limfinity

2

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

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


1

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

@media screen and(max-width:768px){
}

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

@media screen and (max-width:768px){
}

0

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


Посмотрим на CSS еще раз, спасибо ... приятно знать, что он работает на чем-то.
красная консерватория

0
@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

7
пожалуйста, добавьте некоторые пояснения к своему коду, показывая, как это решает проблему - это поможет другим в будущем, и ваш ответ, скорее всего, будет проголосован
Наш Человек в

2
Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код.
Ferrybig

0

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

Если это ты, иди измени его!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

0

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


1
Это не должно было быть проголосовано. Это был ответ на мою неприятную проблему!
Амир Альмусави
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.