Почему мои медиа-запросы CSS3 не работают?
В файле styles.css я использую медиа-запросы, оба из которых используют следующие варианты:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
Когда я сжимаю окно, сайты меняют размер в соответствии с макетом, который я хочу использовать в обычном браузере (Safari, Firefox), однако мобильный макет вообще не отображается на телефоне. Вместо этого я просто вижу CSS по умолчанию.
Может ли кто-нибудь указать мне правильное направление?
1 ответ
Странная причина я никогда не видел прежде: при использовании "родителя> дочерний" селектор за пределами мультимедийного запроса (в Firefox 69), он мог повредить мультимедийный запрос. Я не уверен, почему это происходит, но для моего сценария это не работало...
@media whatever {
#child { display: none; }
}
, Но добавление родителя для соответствия некоторому другому CSS далее выше на страницу это работает...
#parent > #child { display: none; }
Походит на определение, что родитель не должен иметь значения, так как идентификатор очень конкретен и не должно быть никакой неоднозначности. Возможно, это - ошибка в Firefox?