У меня есть следующий запрос СМИ в <style> блоке, в <head> моего файла index.htm ....Как заставить Media Query работать при загрузке IE?
@media screen and (min-width: 40.5em) {
header[role="banner"] {border:solid 1px red;}
}
Но IE10 не будет производить красную рамку вокруг моего заголовка при загрузке страницы. Теперь, если я возьму стиль из этого медиа-запроса, IE обработает красную рамку, когда страница перезагрузится.
В чем секрет, что это отображается в IE10 с загрузкой моей страницы?
Кроме того ... Я следующий набор в моем
<head>
...
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
...
</head>
рх не работает для меня тоже ...
@media only screen and (max-device-width: 100px) {
header[role="banner"] {border:solid 1px red;}
}
не показывать ...
UPDATE
Я понял, что происходит. В моем стиле блока У меня есть следующий код CSS ...
@media screen and (min-width: 5em) {
//various css rules for mobile view
}
и прямо под его у меня есть ....
@media screen and (max-width: 40.5em) {
//various css rules for desktop view
}
Chrome понимает это на моем рабочем столе браузера и читает второй медиа-запрос , Но IE10 застрял на первом. Моя цель - иметь мобильный подход, но не для того, чтобы IE застрял там, если размер экрана больше. Это моя проблема ...
Когда я удаляю первый медиа-запрос, второй работает в IE. Как я могу сохранить оба из них и знать IE, чтобы игнорировать первый для больших экранов ...?
Вы уверены, что экран шире 40.5 мкм? –
да, у меня есть полноэкранный режим, на моем рабочем столе. – blackhawk
Вы пытаетесь использовать пиксель вместо «em»? –