Почему мои медиа-запросы 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 является довольно распространенным, поэтому я поверил в это и пошел с этим. Это сломало мой код. Есть меню настроек для обучения правильной разметке комментариев для каждого типа файла.
Источник
не работает @media в css
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Не работает команда @media в CSS
Добрый день. Подскажите пожалуйста где ошибка. Цель, хочу чтобы при просмотре сайта через.
Разница между @media и атрибутом media в CSS
Доброго времени суток! Очень каноничный ламер, буквально 2 дня назад начал читать про разметку.
Media screen css
Ребят, подскажите. Как сделать, если media screen = значению, которому указывал, он загружал.
Media запрос CSS
Всем привет! Делаю адаптивную версиб сайта (под мобилы), возникла проблемма. Основной CSS .
vlad_fom, 
увы и такая запись не работает.
Добавлено через 1 минуту
evikza, увы и этот вариант не проходит. пробовал.
Решение
vlad_fom, ну как же не работает?
С вашим @media запросом, правила работать не будут:
Если сделать как я показал, все отлично работает
vlad_fom, ну как же не работает?
С вашим @media запросом, правила работать не будут:
Если сделать как я показал, все отлично работает
Css media queries
Добрый день.Помогите пожалуйста разобраться.Есть ли причина по которой в css нужно использовать как.
Media css не подключаются к android
Уже не знаю в чем проблема, в хроме в панели разработчика проверил, все работает, но через телефон.
CSS и принтер (@media правила)
Здравствуйте. У меня такой вопрос: необходимо сделать страничку, работающую с @media правилами, то.
@Media CSS Как убрать блок из header?
Всем привет. Возникла проблема с сайтом . У меня в шапке есть логотип,»поддержка»,»жалоба»,и.
Источник
Не работают медиа-запросы
Я правильно понимаю вообще. Если ширина экрана,например, 900, то фон должен быть #2f2f, если 1000 — #000?
Смотрю в инспекторе кода: при 900 — #000, при 1000 — цвет по дефолту(аля белый), #2f2f начинает работать на 744px.
В чем может быть проблема?
P.S. в html строка
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Не работают медиа-запросы
Доброго времени суток, уважаемые. Во время адаптивной верстки через медиа-запросы столкнулся с.
Не работают медиа-запросы
Код HTML: Новый препарат
Не работают медиа запросы
Здравствуйте! Помогите новичку, пожалуйста! Есть сайт не responsive. Клиент захотел, чтобы на.
Это точные подсчеты?)) Токо что проверил у себя все работает как надо
Не работают медиа запросы
Почему-то не работают медиа запросы. Вроде все написала правильно, но все равно где-то есть ошибка.
Не работают медиа запросы
Добрый день. Подскажите в чем может быть дело, не работают медиа-запросы. .noel-title1 < .
Не работают медиа запросы
Всем доброго времени суток. У меня возникла непонятная для меня проблема. Никогда не занимался.
Медиа-запросы не работают из подключаемых css файлов
Здравствуйте! подскажите, в чем причина: медиа запросы работают только если заданы в.
Источник
Не работают медиа-запросы
Я правильно понимаю вообще. Если ширина экрана,например, 900, то фон должен быть #2f2f, если 1000 — #000?
Смотрю в инспекторе кода: при 900 — #000, при 1000 — цвет по дефолту(аля белый), #2f2f начинает работать на 744px.
В чем может быть проблема?
P.S. в html строка
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Не работают медиа-запросы
Доброго времени суток, уважаемые. Во время адаптивной верстки через медиа-запросы столкнулся с.
Не работают медиа-запросы
Код HTML: Новый препарат
Не работают медиа запросы
Здравствуйте! Помогите новичку, пожалуйста! Есть сайт не responsive. Клиент захотел, чтобы на.
Это точные подсчеты?)) Токо что проверил у себя все работает как надо
Не работают медиа запросы
Почему-то не работают медиа запросы. Вроде все написала правильно, но все равно где-то есть ошибка.
Не работают медиа запросы
Добрый день. Подскажите в чем может быть дело, не работают медиа-запросы. .noel-title1 < .
Не работают медиа запросы
Всем доброго времени суток. У меня возникла непонятная для меня проблема. Никогда не занимался.
Медиа-запросы не работают из подключаемых css файлов
Здравствуйте! подскажите, в чем причина: медиа запросы работают только если заданы в.
Источник
Не работают @media запросы в «инструментах разработчика»
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Не работают следующие клавиши — «ю», «д», «щ», «9», «Ф10», «Ф11».
У меня проблема с клавиатурой:cry:, не работают следующие клавиши — «ю», «д», «щ», «9».
Как работают команды «String», «Unstring», «Pointer» с большими переменными?
Привет. Я начинающий программист в Cobol. У меня такой вопрос: мне нужно протестировать как.
Сообщения «>>Checking media presence >>media present. >>start PXE over IPx4.» при загрузке
Как убрать перед загрузкой пк вот это: >>Checking media presence. >>media present.
Ошибка: Cannot implicitly convert type «string» to «System.Window.Media.Color»
Доброго времени суток! Возникла небольшая проблемка, совсем мизерная: ColorToneEffect effect1 =.
К сожалению данная проблема возникает не только на моём устройстве, могу вот ссылка github pages : https://tandem-web.github.io/A. github.io/
Добавлено через 19 минут
Проблема проявляется в панели разработчика при эмуляции мобильных устройств (появляется белая полоска справа, и не работают некоторые @media запросы)
Да, вы правы полоска пропала. Если изменять просто размер окна браузера, то media-запросы работают нормально, а если через панель разработчика, то нет
Добавлено через 6 минут
Большинство запросов меньше max-width: 1240px;
Решение
Снова не вижу проблему.
До 1240 в лого подгружается logo_mid.svg, а после — logo.svg.
.wrapper-menu-icon до 640px левый отступ 0, до 960: -1, потом вообще скрывается.
Будем и дальше в угадайку играть или вы скажете с какими именно стилями проблема в медиа-запросах?
И куда делось указание вьюпорта? Это обязательно.
Добавлено через 2 минуты
Добавляйте вьюпорт, чистите кеш, устанавливайте 100% масштаб страницы. Должно все работать.
2. Вся навигация остаётся, т.е не применяются вот этот запрос:
3. Для обёртки компаса не применяются вот эти стили:
Добавлено через 5 минут
Огромное вам спасибо!
Получить значение из <"text1":"val1","text2":"val2","text3":<"text":"val">>
Есть такая строка var my = ‘<"text1":"val1","text2":"val2","text3":<"text":"val">>’; Как из.
Объясните противоречие «поисковые запросы» и «ссылки на сайт»
Доброго времени суток Только начинаю осваивать эту сложную науку и в самом начале столкнулся с.
Известны сорта роз, выращиваемых тремя цветоводами: «Анжелика», «Виктория», «Гагарин», «Ave Maria», «Катарина», «Юбилейн
Известны сорта роз, выращиваемых тремя цветоводами: «Анжелика», «Виктория», «Гагарин», «Ave.
Корзина, IE, «Учётные записи» и «Службы» работают некорректно
Всем привет! Не корректно работает корзина. При клике по значку «Корзина» правой кнопкой мыши -.
Источник
