Я начал новый адаптивный веб-проект, основанный на фреймворке начальной загрузки Twitter (одновременно приступая к кривой обучения LESS), и я столкнулся с проблемой с IE и медиа-запросами. Поскольку IE7 и 8 не поддерживают медиа-запросы, я взял копию css3-mediaqueries. -js скрипт polyfill, чтобы IE начал реагировать. Не получилось :-(
После долгих размышлений я сузил проблему до синтаксиса медиа-запроса. Медиа-запросы Bootstrap:
@media (max-width: 480px) { ... } // Landscape phones and down
@media (max-width: 767px) { ... } // Landscape phone to portrait tablet
@media (min-width: 768px) and (max-width: 979px) { ... } // Portrait tablet to landscape and desktop
@media (min-width: 1200px) { ... } // Large desktop
Оказывается, они неправильно анализируются css3-mediaqueries-js, поскольку скрипт ожидает, что между выражениями @media и (...) должен быть тип мультимедиа — экран, портативный компьютер, все и т. д., например:
@media all and (max-width: 480px) { ... }
Вопрос в том, что правильно, bootstrap или css3-mediaqueries.js? Спецификация W3C (http://www.w3.org/TR/css3-mediaqueries/#media0) говорит, что css3-mediaqueries.js правильный, а bootstrap неправильный:
Медиа-запрос состоит из типа мультимедиа и нуля или более выражений, которые проверяют условия определенных функций мультимедиа.
Чуть менее авторитетный источник (Russ Weakly) утверждает обратное:
Функцию мультимедиа можно использовать без типа мультимедиа или ключевого слова. Предполагается, что тип носителя — «все». (слайд 42)
Что еще более важно, именно так ведут себя браузеры, изначально поддерживающие медиа-запросы.
Итак, что нужно исправить, bootstrap или css-mediaqueries-js?
