Media Queries в CSS3 — Адаптивный CSS

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

расширяют понятие оптимизации на специфические типы носителей, допуская оптимизацию для особых свойств носителя. Экран – полезный тип носителя, но существует много разновидностей экранов – от мобильных телефонов с крошечными экранами, через лэптопы со средними экранами, и до настольных ПК, подсоединенных к широкоэкранным 30-дюймовым мониторам; более новые экраны могут иметь более высокое разрешение, по сравнению с выпущенными прежде. Как веб-разработчик вы, наверное, захотите переформатировать свою страничку для каждого из этих устройств, чтобы предоставить посетителю сайта наилучшее представление на каждом из них. CSS3 позволяют настроить ваш 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) { ... }

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

Запись навигация

Top