Поддержка CSS3 @media в IE7 и IE8

2 сентября 2013

Обычно IE5-IE8 не поддерживают CSS3 медиа запрос. Хотя данная возможность очень важна для кросс-браузерного веб-дизайна. Здесь я расскажу вам, как можно решить вопрос CSS3 медиа запросов для IE. Этот урок, поможет создать динамически изменяемую разметку в зависимости от разрешения экрана.

Для этого воспользуемся JavaScript библиотекой css3-mediaqueries.

Как подключить?

Скачайте и подключите скрипт между тегов HEAD следующим образом:

 <!--[if lt IE 9]>
<script src="/здесь измените путь к скрипту/css3-mediaqueries.js"></script>
<![endif]-->

Как использовать?
Добавьте новые правила в таблице стилей:

@media screen and (min-width: 1000px)
{
/* Тут необходимо поместить набор CSS правил, которые будут применены, если разрешение экрана станет больше 1000px */
}

Как применять скприпт в дальнейшем, ограничено только вашей фантазией.

Примечание:
Поддерживаются и более ранние версии IE 5+.
Данный скрипт не работает с @import’ированными стилями.
Используйте только оператор ‘and’ (‘or’ не поддерживается).

Ссылки по теме:
css3-mediaqueries
W3C Media Queries

Поделиться: Добавить в Facebook Добавить в Вконтакте Добавить в ЖЖ Добавить в Twitter