В файле styles.css я использую медиазапросы, в обоих из которых используется вариант:
/*--[ Normal CSS styles ]----------------------------------*/
@media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
Когда я уменьшаю окно, сайты меняют размер до нужного мне макета в обычном браузере (Safari, Firefox), однако макет мобильного телефона вообще не отображается на телефоне. Вместо этого я просто вижу CSS по умолчанию.
Может кто-то указать мне верное направление?
html
css
media-queries
mobile-website
redconservatory
источник
источник
px
в@media (max-width: 320px)
.Ответы:
Все три из них были полезными советами, но, похоже, мне нужно было добавить метатег:
Теперь все работает на 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 является довольно распространенным, поэтому я поверил в это и пошел с этим. Это сломало мой код. Есть меню настроек для обучения правильной разметке комментариев для каждого типа файла.источник
Включение метатега, как показано ниже, может привести к тому, что браузер будет по-разному обрабатывать масштабирование области просмотра.
<meta content="width=device-width, initial-scale=1" name="viewport" />
источник
Я тоже недавно столкнулся с этой проблемой, и позже узнал, что это потому, что я не поставил пробел между
and
и(
. Это была ошибкаЗатем я изменил это, чтобы исправить это
источник
Я использую несколько методов в зависимости. В той же таблице стилей я использую: @media (max-width: 450px), или для отдельного убедитесь, что у вас есть ссылка в заголовке правильно. Я посмотрел на ваш fixmeup, и у вас есть запутанный массив ссылок на css. Он действует, как вы говорите, также на HTC desire S.
источник
источник
Для меня я указал
max-height
вместоmax-width
.Если это ты, иди измени его!
источник
Это также может произойти, если уровень масштабирования браузера не является правильным. Масштаб окна вашего браузера должен быть 100%. В Chrome используйте
Ctrl + 0
для сброса уровня масштабирования.источник