Одним из принципов адаптивного дизайна является то, что можно создавать разные верстки для веб-сайта, в зависимости от ширины окна браузера, динамически изменяя внешний вид веб-страницы при изменении размера окна браузера. 

Рассмотрим веб-сайт вымышленной компании “Ray’s Flowers” (Цветы Рея). На большинстве страниц есть три блочных элемента, #col1, #col2 и #col3, расположенные бок о бок на большинстве экранов настольных компьютеров с помощью свойства display: table-cell (отображения в виде ячейки таблицы).

Этот дизайн адаптивный, так что колонки текста станет сложно читать при ширине браузера меньше 1000 пикселей. Изменения во внешнем виде сайта при ширине окна браузера более 1000px и менее 1000px незначительные, так что вместо создания отдельного файла стилей можно задать отличающиеся стили в основном коде CSS:

body {
        margin: 0;
        font-family: Cambria, sans-serif;
}
h1 {
        background: #000;
        margin-top: 0;
}
div#col1, div#col2, div#col3 {
        display: table-cell;
        padding: 1em;
        padding-top: 0;
}
/* обычные правила CSS, применяемые ко всему до этого момента */
@media screen and (max-width: 1000px) {
        div#col1, div#col2, div#col3 {
                display: table-row;
        }
}

Теперь, если браузер шире 1000px, колонки отобразятся вертикально, а при ширине менее 1000px – горизонтально.

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

@media screen and (orientation:portrait) {
        /* правила отображения, применяющиеся при вертикальном расположении экрана */
}
@media screen and (orientation:landscape) {
        /* правила отображения, применяющиеся при горизонтальном расположении экрана */
}

Также следует отметить, что еще можно анимировать переход между этими состояниями запросов @media или задать отдельные свойства для печати на страницах разного размера:

@media print and (width: 210mm) {
        /*правила для печати на странице размера A4 */
}

Дополнительная информация о работе со старыми версиями браузера Internet Explorer: как Вы, вероятно, знаете, браузер Internet Explorer версии 8 и более ранних не поддерживает запросы @media CSS, так что если Вам вдруг нужна поддержка таких старых версий браузеров, можно воспользоваться обходным путем с использованием JavaScript.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание необычных непрямоугольных веб-дизайнов
• Используем необычные шрифты для заполнения макета сайта
• Новый подход к адаптивным таблицам