Почему не работает media css

CSS multiple @media (min-width) не работает

У меня есть три оператора @media (min-width), начиная с мобильных устройств и заканчивая настольными. По какой-то причине третье утверждение не срабатывает.

JS Fiddle, чтобы показать эффект здесь: https://jsfiddle.net/t5vh316h/ (перетащите центральный разделитель на разную ширину, чтобы увидеть, что я имею в виду)

Окно никогда не становится синим, последний запрос, кажется, игнорируется. Почему?!

3 ответа

<link href=css/mobile-large.css media=all and (min-width: 481px) and (max-width: 760px) rel=stylesheet type=text/css /> Разве эта строка кода не должна делать так, чтобы таблица стилей mobile-large.css загружалась при использовании Samsung Galaxy Nexus с шириной 720px? Однако это не так, в.

Почему следующий запрос media не воспринимается на iPads в ландшафтном режиме? @media all and (min-device-width: 1000px) < css here >Или @media all and (min-width: 1000px) < css here >Я хочу, чтобы этот css был нацелен на любой браузер шириной 1000 пикселей или более, а не только на iPad. По.

Похоже, у вас есть специальный символ, следующий за существующими закрывающими фигурными скобками, как указано в вашем JSFiddle :

enter image description here

Просто удалите эти символы trailing, как показано ниже :

Проблема заключалась в ненужности dots после ваших media запросов. Я обновил ваш fiddle

Оказывается, у вас был какой-то мусорный символ юникода #8203, после его удаления, ваш fiddle работал.

Похожие вопросы:

У меня есть IE11 и Chrome. В моем css у меня есть имбрикация media min-height min-width, и она работает, но не на IE11. Это код : @media (min-width: 0) and (max-width: 992px) < @media (min-height.

Я не знаю, почему мой запрос CSS media не работает должным образом: /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) < .bottom-right.bottom-right.

я использую запрос @media для преобразования моей страницы html в отзывчивую страницу, но я застрял, чтобы преобразовать свою страницу в отзывчивую страницу. Я использую @media(min-width:480px) and.

<link href=css/mobile-large.css media=all and (min-width: 481px) and (max-width: 760px) rel=stylesheet type=text/css /> Разве эта строка кода не должна делать так, чтобы таблица стилей.

Почему следующий запрос media не воспринимается на iPads в ландшафтном режиме? @media all and (min-device-width: 1000px) < css here >Или @media all and (min-width: 1000px) < css here >Я хочу.

Я очень новичок в мире запросов media, и ясно, что мне не хватает чего-то фундаментального в разнице между шириной и шириной устройства-кроме их очевидных возможностей таргетинга. Я хотел бы.

У меня есть проблема с добавлением CSS для конкретного устройства. Я запустил свое приложение на этих двух симуляторах: ширина: 320 и высота: 500 ширина: 320 и высота: 588 Теперь моя проблема в том.

Демонстрация При изменении размера результата ниже 400px @media not (min-width: 400px) не работает, я знаю, что мог бы использовать @media (max-width: 399px) , но я хочу знать, почему не работает

Я использую запрос media, независимо от того, что браузер ниже или выше 1200px, css всегда обнаруживает, что моя минимальная ширина браузера равна 768px.so, дисплей в браузере всегда равен 750px.

Я пытаюсь использовать @media для изменения фонового изображения моего сайта Почему-то, когда я использую @media (orientation: landscape) , это работает нормально, но когда я использую min и max.

Не работает тег @media, как исправить?

Hmtl/css, урок 61. Написал все как в видеоуроке, но в мобильном режиме браузера не меняется цвет фона .header. Пробовал и Оперу, и Хром, последние версии.

В Index.html есть строка

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

Похожие вопросы

  • Слово киномонстр так и остается подчеркнуто и в синем цвете, как исправить?
  • Все как в уроке сделано, а браузер не отображает изменений, как исправить?
  • Укажите где именно я сделал ошибку и в чем она заключается?
  • Не игнорте 42 урок (пробывал скачать исходник) не работает?
  • Кнопка смотреть исчезает после стилизации, как исправить?
  • Почему не подключается css к html?
  • Не могу установить Footer
  • Не изменяется страница, что делать?
  • В уроке по html не пропускает задание с футером?
  • Зависит ли от разрешения экрана то как потом будет выглядеть сайт?

5 ответов

  • Все вопросы
  • Старые
  • Голоса

В каком разрешении?

В мобильном режиме выбирал iphone5, там выставлено по умолчанию как раз 320*568, все как в видеоуроке.

Вот от сюда попробуй скачать исходный код и посмотреть:

Наверное в верстке где-то ошибка, может в css файле не стоит ; какая-то или скобка или размер. Бывает еще, что браузер показывает старые результаты, нужно через ctrl и f5 обновлять.

Нашел, между and и открывающей скобкой не стоят пробелы. Хотя опять же про такие нюансы стоит говорить в видеоуроке, потому что sublime text разметку кода в данном случае показывает правильно. Да и в других местах, например после объявления класса и скобкой < пробел неважен, а тут критичен оказывается.

Вот так работает(в нашем случае, цвет будет меняться если ширина экрана менее 568 пикселей):

@media only screen and (max-width: 568px) <
.header <
background-color: #257965;
>
>

почему запрос css3 media не работает?

Я пытаюсь использовать медиа-запрос в css3, чтобы сделать мой сайт отзывчивым, кажется, я сделал все правильно, но он не работает, вот мой код:

файл css работает, но все запросы к медиа не.

Стили CSS приоритетны во многом, порядок — один из них. Кроме того, был один дополнительный > .

Сортировка по важности (нормальная или важная)

Оба правила нормальны

Оба являются авторскими правилами

Сортировка правил с одинаковой важностью и происхождением по специфичности селектора

body и body определяют селекторы.

Наконец, сортировка по указанному порядку: если два объявления имеют одинаковый вес, происхождение и специфичность, последний указывает, что выигрывает.

background-color: #fcfcfc; правила появляются после background-color: blue; поэтому он перезаписывает его.

Заказ важен. Измените порядок правил.

(У вас также есть дополнительный > который вызывает синтаксическую ошибку. Удалите его.)

Я думаю, вы не добавили тег meta viewport, проверьте свой Html файл.

Причина, по которой он не работает, дается корректно и подробно с помощью Квентина. Это потому, что порядок важен в CSS.

Если вы говорите, что дважды задайте свойство для одного и того же элемента в файле CSS, то применяется тот, который приходит позже. Так что, если у вас есть,

в том же файле тег body наследует red фона (даже для размеров экрана <480 пикселей). Просто поместите медиа-запрос после решения проблемы.

Другая работа, которую я использую в медиа-запросах, — это включить !important правило. SO, в следующем случае тег body будет иметь white цвет фона для размеров экрана <480 пикселей и red фона в противном случае.

Поэтому, когда дело доходит до медиа-запросов, я считаю полезным использовать свойство с использованием !important правила, так что мне не нужно беспокоиться о заказе, так как часто добавляются медиа-запросы позже. Но это не очень хорошая практика, поэтому используйте разумно, поскольку это затрудняет дальнейшую отладку.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *