Підтримка IE8 для CSS Media Query

Чи IE8 не підтримує наступний медіа-запит CSS:

@import url("desktop.css") screen and (min-width: 768px);

Якщо ні, то який альтернативний спосіб написання? Це ж чудово працює у Firefox.

Якісь проблеми з кодом нижче?

@import url("desktop.css") screen; 
@import url("ipad.css") only screen and (device-width:768px);

Версії Internet Explorer до IE9 не підтримують медіа-запити .

Якщо ви шукаєте спосіб деградації дизайну для користувачів IE8, ви можете вважати корисними коментарі IE корисними. Використовуючи це, ви можете вказати специфічну таблицю стилів IE 8/7/6, яка надписує попередні правила.

Наприклад:

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

Це не дозволить чуйного дизайну в IE8, але може бути більш простим і доступним рішенням, ніж використання плагіна JS.

css3-mediaqueries-js - це, мабуть, те, що ви шукаєте: цей скрипт імітує медіа-запити. Однак (з сайту сценарію) він "не працює на @importтаблицях стилів Ed (якими ви не повинні користуватися з міркувань продуктивності). Також не слухатиме медіа-атрибут елементів <link>та <style>елементів".

У цьому ж ключі у вас є простіший Respond.js , який дозволяє лише min-widthта max-widthмедіа-запити.

Найкраще рішення, яке я знайшов, - це Respond.js, особливо якщо ваша головна проблема - переконатися, що ваш дизайн, що реагує, працює в IE8. Він досить легкий на 1 кбіт, коли min / gzipped, і ви можете переконатися, що завантажують його лише клієнти IE8:

<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->

Це також рекомендований метод, якщо ви використовуєте bootstrap: http://getbootstrap.com/getting-started/#support-ie8-ie9

IE8 (і нижчі версії) та Firefox до 3.5 не підтримують медіа-запити. Safari 3.2 частково його підтримує.

Існує декілька обхідних завдань, які використовують JavaScript, щоб додати підтримку медіа-запитів до цих браузерів. Спробуйте такі:

Плагін jQuery для медіа-запитів (стосується лише максимальної / хв ширини)

css3-mediaqueries-js - бібліотека, яка має на меті додати підтримку медіа-запитів до непідтримуючих браузерів

Взяте зі сторінки проекту css3mediaqueries.js.

Примітка. Не працює на таблицях стилів @ import'ed (які ви не повинні використовувати з міркувань продуктивності). Також не слухатиме медіа-атрибут елементів <link>та <style>елементів.

Простий спосіб використання css3-mediaqueries-js - це включити наступне перед тегом body body:

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script 
   src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->

Відредагована відповідь: IE розуміє просто екран та друк як імпортний носій. Усі інші CSS, що постачаються разом із заявою імпорту, змушують IE8 ігнорувати оператор імпорту. У такої проблеми у веб-переглядача Geco, як-от сафарі або мозіла, не було.

Медіа-запити взагалі не підтримуються в IE8 та нижче.

Обхід на основі Javascript

Щоб додати підтримку IE8, ви можете використовувати одне з декількох рішень JS. Наприклад, відповідь можна додати, щоб додати підтримку медіа-запитів до IE8 лише із наступним кодом:

<!--[if lt IE 9]>
<script 
   src="respond.min.js">
</script>
<![endif]-->

CSS Mediaqueries - це ще одна бібліотека, яка робить те саме. Код для додавання цієї бібліотеки до вашого HTML буде ідентичним:

<!--[if lt IE 9]>
<script 
   src="css3-mediaqueries.js">
</script>
<![endif]-->

Альтернатива

Якщо вам не подобається рішення на базі JS, слід також розглянути можливість додавання таблиці стилів IE <9, де ви налаштовуєте свій стиль, специфічний для IE <9. Для цього слід додати такий код у свій код:

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

Примітка :

Технічно це ще одна альтернатива: використання хаксів CSS для націлювання на IE <9. Це має такий самий вплив, як таблиця стилів IE <9, але для цього вам не потрібна окрема таблиця стилів. Я не рекомендую цей варіант, оскільки вони виробляють недійсний код CSS (що є однією з декількох причин, чому використання CSS-хаків сьогодні взагалі спокушається).

До Internet Explorer 8 не було підтримки медіа-запитів. Але залежно від вашого випадку ви можете спробувати використовувати умовні коментарі для націлювання лише на Internet Explorer 8 і новіші версії. Вам просто потрібно використовувати належну архітектуру файлів CSS.

http://blog.keithclark.co.uk/wp-content/uploads/2012/11/ie-media-block-tests.php

Я використовував, @media \0screen {}і це працює добре для мене в РЕАЛЬНОму IE8.

IE не додав підтримку медіа-запитів до IE9. Так що з IE8 вам не пощастило.