CSS3 Media запросы или более гибкий дизайн web-страницы

В CSS3 имеется возможность подгружать различные таблицы стилей в зависимости от ширины экрана. Это дает возможность подогнать содержимое страницы под различные разрешения и получить более удобное отображение в конечном счете.
Начнем с примеров:

Стили при минимальной ширине

Если ширина просматриваемой области не более 1000px, то для блока назначается размер шрифта и цвет фона:

@media screen and (max-width: 1000px) {
.content{
background: #ccc;
font-size:1.2em;
}
}

Можно указать и в коде страницы:

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="main.css" />

Комбинированные стили

Например, если ширина области просмотра находится в интервале 1000–1400px:

@media screen and (min-width: 1000px) and (max-width: 1400px) {
body {
background: #000; /*...и хочу перекрасить ее в черный*/
}
}

Для html соответсвенно:

<link rel="stylesheet" media="screen and (min-width: 1000px) and (max-width: 1400px)" href="mid.css" />

IE и CSS3 media

Тут все ожидаемо. Поддержки данных свойств нет в IE8 и ниже. Реализация через js. Примеры решения:

  • css3-mediaqueries-js — библиотека для реализации css media в IE
  • вариант решения, предложенный на Particletree
  • В частных случаях написать самому будет проще

Примеры сайтов

Поменяйте ширину окна браузера и все поймете:
alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
lessframework.com — целый фреймворк, сравнимый с 960.gs

Примечание:
Media запросы — в первую очередь дизайн-презентация, а не оптимизация сайта. Следует учесть, что, например, для мобильных устройств стоит убирать лишнюю графику и элементы оформления.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *