@media в таблице стилей игнорируется IE

Question

При большом увеличении моей таблицы стилей у меня есть три строки, которые регулируют размер шрифта в зависимости от разрешения экрана. Он отлично работает во всех браузерах, кроме IE (я тестировал IE7-8).

@media screen and (min-width: 0px) and (max-width: 1199px){html, body{font-size:8px;}}
@media screen and (min-width: 1200px) and (max-width: 1499px){html, body{font-size:9.5px;}}
@media screen and (min-width: 1500px){html, body{font-size:11px;} 

как я могу решить эту проблему? Есть ли хак, скрипт, плагин, который я могу добавить, чтобы он работал в IE? Спасибо

Answer 1

IE 8 и ниже не понимают медиа-запросы.Вы можете использовать комментарий в своем HTML, чтобы сделать таблицу стилей видимой только для IE.См. Эту страницу для объяснения: http://css -tricks.com / how-to-create-an-ie-only-stylesheet /

Например:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<![endif]-->

В приведенном ниже примере медиазапрос служит для одной таблицы стилей для экранов шириной до 480 пикселей, а другой - для экранов 481 или более.Он обслуживает пользователей IE 8 и ниже по той же таблице стилей:

<link
    rel="stylesheet"
    type="text/css"
    media="screen and (max-device-width: 480px)" href="/css/style.css" />

<link
    rel="stylesheet"
    type="text/css"
    media="screen and (min-device-width: 481px)" href="/css/style.css"/>   

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<![endif]-->

Answer 2

Internet Explorer не поддерживает их до IE9.

У Скотта Хансельмана есть хорошая история о медиа-запросах и прогрессивных улучшениях.

http://www.hanselman.com/blog/LearningAboutProgressiveEnhancementSupportingMobileBrowsersWithCSS3MediaQueries.aspx

Answer 3

Конечно, он игнорирует их, пока IE9 не поддерживает медиазапросы.

Answer 4

Если вы ищете решение jQuery для решения этой проблемы со старыми браузерами IE, вот хороший ресурс.

http://www.protofunc.com/scripts/jquery/mediaqueries/

надеюсь, это поможет

Answer 5

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

https://github.com/scottjehl/Respond