Если Вы еще не имели дела с Media Queries, сейчас самое время создать Ваш первый адаптивный дизайн веб-сайта. В этом уроке мы рассмотрим преобразование дизайна темы WordPress в адаптивную верстку, принимая во внимание исходную сетчатую структуру дизайна. Надеемся, урок окажется вам полезен.

В 2011 году автор урока создал дизайн, запрограммировал и собрал полнофункциональную тему WordPress под названием “Typo”. Этот дизайн хорошо подходит для адаптивной верстки, так что мы будем использовать HTML и CSS как основу, чтобы трансформировать статичную верстку в адаптивную верстку, приспособленную для разных размеров viewport.

Когда размер viewport нашего браузера уменьшен, мы увидим, что наш исходный сайт уродливо обрезан и добавлены горизонтальные полосы прокрутки. Цель адаптивной навигации – подстраиваться к этим различным размерам viewport так, чтобы дизайн оставался читабельным. Смартфоны и планшеты автоматически смаштабируют исходный веб-сайт, чтобы он помещался в их экран, но создание специальной верстки для этих низких разрешений позволит сайту легко читаться без необходимости увеличения изображения.

Первый шаг к созданию нашей адаптивной верстки – запланировать, какие разрешения мы будем обслуживать. Распространенные разрешения включают 320px при вертикальной ориентации смартфонов, 768px при вертикальной ориентации планшетов, 1024px при горизонтальной ориентации планшетов (а также типичное разрешение нетбуков) и разные разрешения мониторов настольных компьютеров. Стоит заметить, что верстка, которая обслуживает только предварительно установленные разрешения, часто называется «адаптивной», хотя по-настоящему «адаптивная» верстка будет построена с использованием ems или процентов, позволяя бесконечный уровень масштабирования.

<link href="mediaqueries.css" rel="stylesheet" />

Теперь мы можем начать с CSS media queries, чтобы добавить адаптивную функциональность нашему дизайну. Мы добавим media queries и дополнительные объявления в отдельный CSS файл, но они могут быть добавлены и к Вашей основной таблице стилей.

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Нам также нужно не допустить, чтобы iPhone автоматически масштабировал вебсайт, чтобы уместить его в свой экран, и этот удобный мета-тег укажет Safari на iPhone настроить ширину устройства на размер его viewport.

@media screen and (max-width: 960px) { }

Ширина исходной верстки – 960px, так что любое разрешение ниже этого значения создаст полосы горизонтальной прокрутки и обрежет содержание. Поэтому первая из наших media queries будет нацелена на экраны с разрешением ниже 960px.

@media screen and (max-width: 960px) {
        #container, footer {
               width: 758px;
        }

        #content {
               margin: 0 20px 0 0;
        }
        #sidebar {
               width: 212px;
        }
               #sidebar section {
                       clear: left;
               }
               #sidebar #search #searchbar {
                       width: 152px;
               }
}

Следующее наиболее популярное разрешение ниже 960px – это 768px, обслуживающее вертикальную ориентацию экранов планшетов. Этот дизайн “Typo” построен, используя сетку, так что, чтобы он оставался подходящим для верстки, мы можем просто удалить колонку, чтобы ширина стала 758px. После этого исходная верстка может быть сужена до нужного размера уменьшением отступа в блоке содержимого, и также уменьшением общей ширины боковой панели.

@media screen and (max-width: 758px) {
        #container, footer, #sidebar {
               width: 524px;
        }

        header nav {
               clear: left; float: none; overflow: hidden;
        }
               header nav li {
                       width: auto; margin: 0 25px 0 0;
               }

        header {
               margin: 0 0 44px 0;
        }

        header h1 {
               margin: 0 0 24px 0;
        }

        #sidebar section {
               float: left; clear: none;
        }
               #sidebar #social {
                       margin: 0 20px 47px 0;
               }
        #sidebar #search #searchbar {
                       width: 464px;
        }

После этого значение 758px может быть использовано для следующей media query, так что любое разрешение ниже этого размера включит следующую верстку. В этот момент боковая панель слишком узкая для дальнейшего уменьшения, так что вместо этого ее можно спрятать под основное содержимое, когда сетка сужена еще на несколько колонок. Это означает что ширина блока текущей боковой панели может быть увеличена, чтобы заполнить ширину новой верстки и его дочерние элементы перетекут влево, чтобы заполнить дополнительное горизонтальное пространство.

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

@media screen and (max-width: 524px) {
        #container, footer, #sidebar, #content {
               width: 292px;
        }

        #content article h2 {
               font-size: 24px;
        }

        #content .postinfo li {
               margin: 0 10px 0 0;
        }

        #sidebar #social {
                       margin: 0;
               }
        #sidebar #search #searchbar {
               width: 230px;
        }
}

Третья и последняя media query в нашей адаптивной верстке будет обслуживать особо низкие разрешения, такие как у смартфонов. Эта конкретна верстка более узкая, чем изначальная ширина содержимого, так что этому блоку так же нужно добавить объявление media query в CSS файл. Особо узкий вид перенес каждую ссылку на сообщение на новую строку, но уменьшение отступа между ними помогает подчинить некоторые перетекания.

Благодаря этим трем наборам media queries верстка нашего веб-сайта теперь достаточна адаптивна, чтобы обслужить распространенные размеры viewport, и поможет читаемости, через создание приспособленной верстки вместо полос прокруток или масштабированного изображения. Посмотрите пример и поменяйте масштаб Вашего браузера, чтобы увидеть адаптивную верстку своими глазами.

Посмотреть пример адаптивной верстки.

Автор урока Chris Spooner.

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

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

• 20 CSS-уроков для адаптивного веб-дизайна
• Создаем адаптивный css-таймлайн c 3d эффектом
• Адаптивное Retina-меню
• Адаптивная сетка изображений с предварительным просмотром
• CSS-фреймворки для адаптивного дизайна