Почему мои медиа-запросы 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
Добрый день. Подскажите пожалуйста где ошибка. Цель, хочу чтобы при просмотре сайта через.
Доброго времени суток! Очень каноничный ламер, буквально 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 правилами, то.
Всем привет. Возникла проблема с сайтом . У меня в шапке есть логотип,»поддержка»,»жалоба»,и.
Источник
Почему мои медиа-запросы CSS3 не работают на мобильных устройствах?
в стилях.css, я использую медиа-запросы, оба из которых используют вариант:
сайты изменяют размер до макета, который я хочу в обычном браузере (Safari, Firefox), когда я сжимаю окно, однако мобильный макет вообще не отображается на телефоне. Вместо этого я просто вижу CSS по умолчанию.
может ли кто-нибудь указать мне в правильном направлении?
9 ответов
все три из них были полезными советами, но похоже, мне нужно было добавить мета-тег:
теперь он, похоже, работает как в Android (2.2), так и в iPhone.
Не забудьте иметь стандартные объявления css выше медиа-запрос или запрос также не будет работать.
Я подозреваю, что ключевое слово only может быть проблема здесь. У меня нет проблем с использованием медиа-запросов, таких как:
@media screen and (max-width: 480px)
я использовал bootstrap на пресс-сайте, но он не работал на IE8, я использовал css3-mediaqueries.JS javascript, но все еще не работает. если вы хотите, чтобы ваш медиа-запрос работал с этим файлом javascript, добавьте экран в строку медиа-запроса в css
css Link line так же просто, как и выше.
сегодня у меня была аналогичная ситуация. Медиа-запрос не работает. Через некоторое время я обнаружил, что место после » и » отсутствует. Правильный медиа-запрос должен выглядеть так:
Я использую несколько методов в зависимости от. В той же таблице стилей я использую: @media (max-width: 450px), или для отдельного убедитесь, что у вас есть ссылка в заголовке правильно. Я посмотрел на ваш fixmeup, и у вас есть запутанный массив ссылок на css. Он действует, как вы говорите, также на HTC desire S.
Я скопировал bootstrap 4 media queries прямо из своих документов, и каждый запрос помечен той же разметкой комментариев в стиле javascript // !
кроме того, IntelliJ text editor позволил мне комментировать определенные строки css в меньшем файле, но автоматически использовать // . Это не бесплатная программа, поэтому я предположил, что все правильно. Существует меню предпочтений для исправления этого поведения.
кроме того, проверьте свой css с надежным онлайн-валидатором. вот на В3
для меня я указал max-height вместо max-width .
Источник
Не работают @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 минут
Огромное вам спасибо!
Есть такая строка var my = ‘<"text1":"val1","text2":"val2","text3":<"text":"val">>’; Как из.
Объясните противоречие «поисковые запросы» и «ссылки на сайт»
Доброго времени суток Только начинаю осваивать эту сложную науку и в самом начале столкнулся с.
Известны сорта роз, выращиваемых тремя цветоводами: «Анжелика», «Виктория», «Гагарин», «Ave.
Корзина, IE, «Учётные записи» и «Службы» работают некорректно
Всем привет! Не корректно работает корзина. При клике по значку «Корзина» правой кнопкой мыши -.
Источник
Не применяются @Media запросы
У меня такая проблема — @Medai запросы просто не хотят применяться! Когда я захожу из обычного браузера он их как будто не видит. Но когда я захожу с quirktools.com то все работает и стили применяются! Вот пример стандартного текста и @Media к нему:
(Основной документ CSS)
(Документ со стилями)
Text3 <
font-family: Georgia, Arial, Tahoma;
font-size: 16px;
color: #FFFFFF;
padding-top: 25px;
padding-left: 15px;
height: 115px;
width: 770px;
>
Текст из CSS_1280x1024.css
@media screen and (width: 1280px) and (height: 1024px) <
#Text3 <
font-family: Georgia, Arial, Tahoma;
font-size: 17px;
color: #FFFFFF;
padding-top: 55px;
padding-left: 15px;
height: 215px;
width: 1440px;
>
>
И при заходе с браузера этот @Media не применяется а при просмотре с сайтов для просмотра сайтов в разных разрешениях экрана — применяются, хотя и там и там один и тот же браузера!
Так в чем моя ошибка, как может быть что в одном и том же браузере в одном окне @Media работают а в другом — нет!
Помогите пожалуйста — я баллов не пожалею!
Источник