Статья: "CSS media или адаптивная верстка"

Статья

CSS media или адаптивная верстка

Казалось бы, что об этом писать? Да, информации много. Но саму технологию почему‑то мало используют. Итак, расскажу почти с самого начала.

Правило media позволяет указать тип носителя, для которого будет применяться указанный стиль. На htmlbook.ru есть пример:

Код: (HTML)

<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>

И что это означает? Что для устройства, указанного после правила @media, будет применен соответствующий стиль. Но этот, как видите, CSS‑код предназначен для внедрения в HTML‑код. А как быть, если стили вынесены в отдельный файл? Ничего проще:

Код: (HTML)

Типы устройств можно посмотреть в htmlbook или на www.w3schools.com.

Кстати, этот трюк хорошо использовать, если вы считаете, что пользователь пожелает печатать вашу страницу без левого и правого сайдбаров, без шапки и футера.

А теперь — почему появилась эта статья. Я обнаружил в статистике своего «блога», что ко мне стали часто заходить посетители с низким разрешением экрана (от 300 px) со 100% отказом. А все почему? Фиксированная верстка страниц с левым сайдбаром доставляет массу неудобств для такого разрешения. Что же делать? Читать, читать, изучать!

Что читаем? W3C Media Queries. И что там видим?

device-width
Value: <length>
Applies to: visual and tactile media types
Accepts min/max prefixes: yes

The ‘device-width’ media feature describes the width of the rendering surface of the output device. For continuous media, this is the width of the screen. For paged media, this is the width of the page sheet size.

A specified <length> cannot be negative.

Код: (CSS)

@media screen and (device-width: 800px) { … }

Какая прелесть! Вот оно!

И не задумываясь переношу к себе, соответственно подготовив файлы.

Код: (HTML)

Упс... не работает. Внимательно читаем документацию:

Accepts min/max prefixes

Ведь так нельзя! Напишите, что device‑width может принимать вид min‑width и max‑width. Но как быть с диапазоном ширины?

Код: (HTML)

Но писать таблицы стилей под каждое разрешение экрана глупо и не дальновидно. Покажу реальный код:

Код: (HTML)

И в самом файле:

Код: (CSS)

@media all and (max-width:699px) {#wrapper {min-width:230px; width:inherit}}
@media all and (min-width:700px) and (max-width:999px) {#wrapper {width: 700px;}}
@media all and (min-width:1000px) {#wrapper {width: 968px;}}

Что — понравилось? Мне тоже. Но это не нравится MS IE ранее 9‑й версии. Причина известна: device-width имеет силу только при поддержке CSS3. Но учитывая то, что на мобильных устройствах не используется MS IE, несколько специфичных строк можно вынести в отдельный файл:

Код: (HTML)

Что читать и где смотреть?

What Is It?
Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
Читаем и качаем Skeleton

Bootstrap
Sleek, intuitive, and powerful front‑end framework for faster and easier web development.
Читаем и качаем Bootstrap
Может я слабо понимаю слово фреймвок, как-то язык не поднимается так назвать набор файлов.

А вот тут Media Queries собрана коллекция сайтов с адаптивной версткой.

Версия для печати

Обсудить на форуме (5)