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

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

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

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

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

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

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

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

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

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

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

.edcar_letter{
    font-size:180px;
}

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

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

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

Я использовал загрузчик на пресс-сайте, но он не работал на 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 Линия связи такая же простая, как и над строкой

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

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

Последовательный порядок кода 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;
   }
}

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

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

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

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

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

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

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

#parent > #child { display: none; }

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

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

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

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

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

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

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

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

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

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

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

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

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

@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;
}

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

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

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

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