Взгляните на эту страницу демонстрации медиа-запросов в Chrome. Теперь отрегулируйте ширину вашего браузера и уменьшите тело ниже 800 пикселей. Как только он достигнет 799 пикселей, цвет фона и текст определения медиа-запроса изменятся.
Теперь загрузите ту же страницу в Firefox, Opera или Internet Explorer 10 и снова измените размер браузера. Это будет зависеть от вашей ОС и конфигурации, но вы обнаружите, что вам нужно уменьшить размер примерно на 20 пикселей, чтобы запустить то же событие медиазапроса. На моем ПК он реагирует на 782px:
Почему? Давайте посмотрим на спецификацию медиазапроса W3C для ширины :
Медиа-функция ‘width’ описывает ширину целевой области отображения устройства вывода. Для непрерывного носителя это ширина области просмотра (как описано в CSS2, раздел 9.1.1 [CSS21]), включая размер визуализированной полосы прокрутки (если есть).
Это не может быть более понятным: Chrome или, более конкретно, движок рендеринга Webkit ( скоро станет Blink ) неправильно игнорирует полосу прокрутки и реагирует слишком рано. Это кажется разумным, поскольку ширина полосы прокрутки варьируется в зависимости от системы, но она идет вразрез со стандартом W3C (возможно, еще одна причина отказаться от монокультуры WebKit ?)
Есть технические решения проблемы. Например, mqGenie обнаруживает браузеры, не относящиеся к Webkit, и вычисляет ширину полосы прокрутки, чтобы вы могли вычесть ее из зарегистрированных размеров окна просмотра браузера. Но вы не должны использовать это …
Если ваш адаптивный дизайн настолько хрупок, что 20 пикселей в любом случае вызывают проблемы с макетом, вы делаете это неправильно!
Адаптивный веб-дизайн позволяет разбивать текучие макеты точками останова. Эти точки останова могут быть простыми (например, изменение размера шрифта) или реализовывать более сложные изменения, которые переставляют столбцы и сетки.
К сожалению, плавные навыки дизайна макетов стали потерянным искусством за последнее десятилетие. Как я уже говорил в 2009 году , фиксированная ширина стала нормой. Расположение жидкости может быть одной из самых сильных сторон среды, но дизайнеры часто борются с этой концепцией.
RWD обращается ко многим критическим замечаниям относительно дизайна жидкости, но добавляет дополнительные сложности. Поэтому соблазнительно использовать медиа-запросы для реализации ряда макетов с фиксированной шириной — и это когда проблемы браузера, такие как предположения полосы прокрутки, кусаются.
Вот три мои золотые рекомендации по отзывчивому веб-дизайну:
- Изучите и экспериментируйте с методами проектирования жидкостей, прежде чем пытаться RWD.
- При создании адаптивного шаблона начните с самого простого макета для мобильных устройств и перейдите к более сложным настольным проектам (см. Также Как использовать адаптивный веб-дизайн для поддержки старых браузеров ).
- Забудьте пиксели — используйте пропорциональные единицы, такие как%, em и rem для размеров шрифта и элемента. Даже если ваш окончательный дизайн должен иметь фиксированные размеры, создайте гибкий макет и соответственно установите ширину внешнего элемента.
Это другой способ мышления, но настойчивый. Введение бумажных ограничений на веб-дизайн уменьшает возможности и делает адаптивный веб-дизайн более трудным, чем необходимо.