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

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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

.edcar_letter{
    font-size:180px;
}

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

Ответ 3

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

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

Ответ 4

Я использовал bootstrap на пресс-сайте, но он не работал на IE8, я использовал javascript css3-mediaqueries.js, но все еще не работал. если вы хотите, чтобы ваш медиа-запрос работал с этим файлом 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 Линия связи так же проста, как и выше.

Ответ 5

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

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

Ответ 6

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

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

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

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

Ответ 10

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

Ответ 11

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

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

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

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

Ответ 12

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

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

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

Ответ 13

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

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

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

#parent > #child { display: none; }

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