Создайте адаптивный сайт за неделю: медиа-запросы (часть 4)

Содержание

• 01. Добавление медиа-запросов
• 02. Анатомия медиа-запроса.
• 03. Еще кое-что…
• 04. Выбор точек останова
• 05. Настройка миниатюр
• 06. Не только ширина

• Необходимые знания: Промежуточный CSS и HTML
• Требует: Текстовый редактор, современный браузер, графическое ПО
• Время проекта: 1 час (всего 5 часов)
• Файл поддержки

Относительно новая часть спецификации CSS, медиа-запросы, несомненно, являются наиболее захватывающим аспектом адаптивного веб-дизайна и областью, готовой для дальнейших экспериментов.

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

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

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

01. Добавление медиа-запросов

Когда компоненты в нашем портфолио шаблонов завершены и работают вне рамок любого макета, пришло время переместить их на разные страницы, составляющие наш сайт.

Начнем с нашей домашней страницы. Из дизайна, ориентированного на рабочий стол, мы видим, что в более широких окнах просмотра наш макет должен выглядеть следующим образом:

Взяв измерения с нашего дизайна, мы можем описать область документа в CSS следующим образом:

.document {
заполнение: 0,5%;
}
.основной {
ширина: 74.242424242424%; / * 784/1056 * /
плыть налево;
}
.complementary {
ширина: 22.727272727273%; / * 240/1056 * /
float: right;
}

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

(цель / контекст) * 100 = результат

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

Здесь и появляются медиа-запросы. Предполагая, что этот макет должен действовать только тогда, когда ширина браузера превышает 768 пикселей, мы можем добавить следующий CSS:

.document {
заполнение: 0,5%;
}
@media screen и (min-width: 768px) {
.основной {
ширина: 74.242424242424%; / * 784/1056 * /
плыть налево;
}
.complementary {
ширина: 22.727272727273%; / * 240/1056 * /
float: right;
}
}

Теперь, когда область просмотра уже 768 пикселей, все внутри медиа-запроса будет проигнорировано. Он будет проигнорирован любым браузером, который также не поддерживает медиа-запросы.

02. Анатомия медиа-запроса.

Чтобы понять, что здесь происходит, давайте посмотрим, как строится медиа-запрос. Мы можем разделить его на две части:

• @media экран: Первая часть медиа-запроса - это тип носителя. Вы можете узнать этот синтаксис, если когда-либо включали стили печати в свой CSS. Вы также можете узнать название типа по СМИ атрибут на ссылка> элемент. Это потому, что оба принимают утвержденный набор типов мультимедиа, найденных в спецификации CSS 2.1.
• (минимальная ширина: 768 пикселей): Вторая часть - это запрос. Это включает характерная черта для запроса (в данном случае минимальная ширина области просмотра) и соответствующий значение для проверки (768 пикселей).

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

• (мин- | макс-) ширина а также (мин- | макс-) высота: Это позволяет нам запрашивать ширину и высоту области просмотра (т.е. окна браузера).
• (мин- | макс-) ширина устройства а также (min- | max-) высота устройства: Это позволяет нам запрашивать ширину всего дисплея. По моему опыту, обычно разумнее основывать макеты на области просмотра, а не на дисплее.
• ориентация: Вы можете сразу подумать о возможностях здесь; подумайте о приложениях, которые показывают разный контент в зависимости от ориентации вашего телефона - то же самое возможно и в Интернете.
• (мин- | макс-) соотношение сторон: Это позволяет нам адаптировать макеты в зависимости от соотношения сторон окна браузера…
• (min- | max-) соотношение сторон устройства: … И это позволяет нам делать то же самое в зависимости от соотношения сторон устройства. В прошлом году Оуэн Грегори написал замечательную статью, в которой исследовал, как мы можем использовать этот запрос, чтобы связать наши проекты с устройствами, на которых они появляются.
• (min- | max-) монохромный: Мы также можем проверить, есть ли у устройства монохромный дисплей. Представьте, насколько это было бы полезно, если бы устройства Amazon Kindle с электронными чернилами не лгали и не сообщали о своих экранах как о цветных!

Последняя часть нашего запроса, пожалуй, самая полезная. Используя а также, мы можем протестировать несколько функций в одном запросе. Например:

@media screen и (min-width: 768px) и (ориентация: альбомная) {
...
}

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

03. Еще кое-что…

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

Чтобы понять, почему это происходит, нам нужно взять краткий урок истории.

Когда в 2007 году был анонсирован первый iPhone, одним из его главных преимуществ была возможность просматривать «настоящий Интернет», даже если это означало сайты с фиксированной шириной, ориентированные на рабочий стол, которые нужно было сжать, чтобы поместиться на маленьком экране. IPhone смог сделать это, сообщив, что его дисплей имеет ширину 980 пикселей, прежде чем масштабировать веб-страницы до размера экрана 320 пикселей.

Но iPhone был представлен до появления адаптивного дизайна. Теперь, когда авторы создают сайты для мобильных устройств, эта функция менее полезна. К счастью, Apple включила средство обхода этого поведения, и, поскольку оно было принято другими производителями, оно стало почти де-факто стандарт. Это просто включает добавление одного мета элемент в нашу разметку:

meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />

Это сообщает браузерам, поддерживающим область просмотра, что веб-сайт не следует уменьшать и что ширина окна браузера должна обрабатываться так же, как и общая ширина устройства. Как только мы добавим эту строку, наш веб-сайт появится с предполагаемым макетом:

04. Выбор точек останова

Вернемся к нашему медиа-запросу:

@media screen и (min-width: 768px) {
...
}

Значения, при которых адаптируется макет, обычно называют точками останова. Если вы помните, во второй части я сказал, что использование пикселей является признаком безразличного мышления, но здесь я выбрал 768 пикселей, вероятно, потому что это ширина знакомого устройства.

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

Поскольку размер нашего типа определяется с помощью ems, кажется разумным, чтобы наши медиа-запросы также использовали ems. На самом деле это дает дополнительное преимущество. Когда пользователь изменяет размер текста в браузере, страницы адаптируются к использованию меньших точек останова. Наш веб-сайт будет адаптироваться не только в зависимости от размера области просмотра, но и размера шрифта. Фактически, только когда я увидел, как Джереми Кейт демонстрирует медиа-запросы на основе электронных писем, я понял, насколько мощными они могут быть.

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

Но как нам выразить 800px в ems? Опять же, мы можем использовать нашу формулу, но каков контекст? При вычислении ems для медиа-запросов контекстом всегда является размер шрифта браузера по умолчанию. независимо от того, было ли это значение переопределено в вашем CSS. Обычно это значение по умолчанию составляет 16 пикселей, что дает нам:

800 / 16 = 50

Теперь мы можем обновить наш медиа-запрос следующим образом:

@media screen и (min-width: 50em) {/ * 800px * /
...
}

05. Настройка миниатюр

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

Вот наш оригинальный CSS:

ol.media li.media-item {
цвет фона: #fff;
маржа: 0 4.16666666667% 4.16666666667% 0;
ширина: 47.91666666667%;
плыть налево;
}
ol.media li.media-item: nth-child (2n) {
поле справа: 0;
}

Точка, в которой появляется это пустое пространство, совпадает с шириной браузера, превышающей 560 пикселей.Мы выберем это значение, чтобы поменять местами отображение трех миниатюр в каждой строке. Мы можем сделать это, добавив следующий CSS:

@media screen и (min-width: 35em) {
.media-item {
ширина: 30.612244897959%; / * 240/784 * /
маржа: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
поле справа: 0;
}
}

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

Просматривая это изменение в браузере, вы заметите, что справа от каждой второй миниатюры нет поля. Это связано с тем, что следующее правило CSS все еще остается активным:

ol.media li.media-item: nth-child (2n) {
поле справа: 0;
}

Нам нужно изменить CSS в нашем медиа-запросе, чтобы сбросить это значение:

@media screen и (min-width: 35em) {
.media-item {
ширина: 30.612244897959%; / * 240/784 * /
маржа: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
поле справа: 4,081632653061%;
}
.media-item: nth-child (3n) {
поле справа: 0;
}
}

При создании медиа-запросов всегда помните о подобных проблемах наследования.

06. Не только ширина

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

.media-object-wrapper {
обивка-низ: 56,25%;
ширина: 100%;
высота: 0;
положение: относительное;
}
@media screen и (max-height: 35em) и (ориентация: альбомная) {/ * 560px * /
.media-object-wrapper {
ширина: 60%;
обивка-низ: 33,75%;
}
}

Я даже включил ориентировочный запрос, чтобы еще больше улучшить это поведение.

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

• Посмотреть нашу адаптивную домашнюю страницу
• Просмотрите нашу страницу адаптивного медиа-элемента

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

Завтра: В заключительной части этого руководства мы выйдем за рамки адаптивного веб-дизайна и посмотрим, как мы можем создавать действительно адаптивные веб-сайты.

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