Уголок CSS: Media Queries в CSS3

  • Article

В прошлом году при анонсе второго варианта предварительной версии платформы, IE9 поддерживал технологию CSS3 Media Queries. CSS3 Media Queries помогают моделировать страницы, основываясь на различных параметрах экрана дисплея – ширине, высоте, ориентации разрешении и т.д. Разработчики могут использовать эти факторы при настройке сайтов для просмотра на различных устройствах – нетбуках с небольшим экраном или широкоэкранных мониторах. В этом сообщении мы поговорим о CSS3 Media Queries и различных сценариях их использования.

Развитие Media Queries

Начиная с версии IE5 Internet Explorer поддерживал носители типов “screen” и “print”. Носители печатного типа особенно полезны при изменении макета печатаемой страницы. Они устраняют необходимость иметь отдельную версию сайта, предназначенную для печати, и допускают некоторые полезные типы оптимизации печати, вроде разворачивания гиперссылок. Спецификация типов носителей CSS2.1 включает определения многих типов носителей, в том числе портативных устройств, синтезаторов речи и телевизоров. Однако на практике наиболее широкое распространение получили экран и принтер.

CSS3 Media Queries расширяют понятие оптимизации на специфические типы носителей, допуская оптимизацию для особых свойств носителя. Экран – полезный тип носителя, но существует много разновидностей экранов – от мобильных телефонов с крошечными экранами, через лэптопы со средними экранами, и до настольных ПК, подсоединенных к широкоэкранным 30-дюймовым мониторам; более новые экраны могут иметь более высокое разрешение, по сравнению с выпущенными прежде. Как веб-разработчик вы, наверное, захотите переформатировать свою страничку для каждого из этих устройств, чтобы предоставить посетителю сайта наилучшее представление на каждом из них. CSS3 Media Queries позволяют настроить ваш CSS-код с такой степенью общности и с такой определенностью, как хочется.

Основной пример

Чтобы создать Media Querу, предназначенный для экранов шириной 1250 px можно написать следующее (замечание: ширина и высота экрана в действительности относятся к ширине и высоте окна браузера, а не физического дисплея):

@media screen and (width:1250px) { ... }

Однако, ставить целью экран (браузер), имеющий ширину точно 1250 px бесполезно, так как не часто окно браузера будет иметь ширину в точности равную 1250 px. Вместо этого более практично иметь в виду диапазон размеров, скажем от 900 до 1300 px:

@media screen and (min-width:900px) and (max-width:1300px) { ... }

На сайте IETestDrive можно найти демонстрацию CSS3 Media Queries, иллюстрирующую несколько разных media queries для изменения макета страницы, исходя из ширины экрана (браузера). Страница оптимизирована как для очень широких экранов, так и для очень узких. Чтобы наблюдать эффект измените размер окна браузера при просмотре.

При широкоэкранном просмотре на странице используется расположение изображений бок о бок с большими картинками и описательным текстом:

clip_image002

На узком экране на странице используются обрезанные картинки, удаляются заголовки и описания.

clip_image004

Вдобавок к созданию правил @media в CSS-файлах можно использовать CSS3 Media Queries в атрибуте media тэгов link и style и внутри блока @import. Несколько примеров:

<link rel="stylesheet" media="screen and (min-width:100px)" href="widescreenStyleSheet.css" />

<style type="text/css" media="print and (orientation:portrait)"> ... </style>

@import "widescreenStyleSheet.css" screen and (min-width:100px);

Параметры Media

IE9 поддерживает следующие параметры media:

  • width – ширина области отображения
  • height – высота области отображения
  • device - width – ширина поверхности устройства визуализации
  • device - height – высота поверхности устройства визуализации
  • orientation – ландшафтная или портретная
  • aspect - ratio – отношение ширины к высоте области отображения
  • device - aspect - ratio – отношение ширины к высоте поверхности устройства визуализации
  • resolution – разрешение устройства вывода
  • color – количество разрядов на цветовую компоненту устройства вывода
  • color - index – число входов в таблице поиска цветов устройства вывода
  • monochrome – число разрядов на пиксель в монохромном буфере кадра (0 если устройство не монохромное)

За исключением ориентации все поддерживаемые IE9 параметры могут использоваться с префиксами «min-» и «max-».

Дальнейшие шаги

Типы, размеры и возможности устройств, на которых люди просматривают информацию, становятся все более разнообразными. CSS3 Media Queries упрощает веб-разработчикам создание единого сайта, предоставляющего всем дисплеям замечательное содержимое.

Если вы обнаружите ошибке в механизме CSS3 Media Query при тестировании бета-версии IE9 или Platform Previews, пожалуйста, сообщите о них на MicrosoftConnect .

Шэрон Ньюман (Sharon Newman),
руководитель программы

Comments

  • Anonymous
    March 17, 2011
    С выходом IE9 всё решилось. Я стал на колени и сказал:"Спасибо, Господи, теперь мой сайт <a href="http://planetaflash.ru">Планета Флеш</a> выглядит одинаково на всех браузерах."

  • Anonymous
    February 25, 2012
    Зато мой любительский сайт выгледит не так http://rogov.net. Но все равно спасибо разработчикам за усовершенствования!

  • Anonymous
    May 08, 2012
    Я на своем сайте про пизвание http://prizvanie.kz тупо использовал бесплатную тему и она на всех разрешениях выглядит одинаково. Плохо выглядит только на 1600 ширине - слишком мелко, что делать не знаю - шаблон поменять там трудно.

  • Anonymous
    July 22, 2012
    комменты кстати тут не индексируются (подгружаются отдельно от страницы), зря стараетесь ))