Использование медиазапросов для адаптивного дизайна в 2018 году

1. Об авторе Рэйчел Эндрю является не только главным редактором журнала Smashing Magazine, но и веб-разработчиком,...
2. Рекомендации по работе с медиа-запросами
3. Не ориентируйте устройства, добавляйте точки останова, когда дизайн ломается
4. Это не все о пикселях
5. Будьте особенно осторожны при изменении порядка элементов Flex и Grid
6. Не забывайте вертикальные медиа-запросы
7. Медиа-запросы Уровень 4: Чего нам ожидать?
8. Определение типа указателя, а не размера экрана
9. Обнаружение переполнения с функциями отображения качества мультимедиа
10. Изменения синтаксиса

Об авторе

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

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

Еще в июле 2010 года я написал статью для Smashing Magazine под названием « Как использовать CSS3 Media Queries для создания мобильной версии вашего сайта ». Почти восемь лет спустя эта статья все еще получает много трафика. Я подумал, что было бы неплохо вернуться к этой теме, теперь, когда у нас есть методы макета, такие как Flexbox и Grid Layout. В этой статье мы рассмотрим использование медиа-запросов для адаптивного дизайна сегодня, а также посмотрим, что будет в будущем.

Вам нужен медиа-запрос вообще?

Первое правило использования медиазапросов в 2018 году - спросить себя, нужно ли вообще использовать медиазапрос. При построении макетов с использованием плавающих элементов мы создаем гибкую сетку, вычисляя размер наших столбцов с использованием процентов. Мы рассчитываем эти проценты, используя метод Этана Маркотта, изложенный в его статье о Жидкостные Сетки , которая легла в основу техники, которую мы теперь знаем как «адаптивный дизайн». Если мы затем хотим изменить размер или пропорции этих столбцов, мы должны добавить точку останова с помощью медиазапроса и переопределить их. У нас нет других вариантов при работе в процентах, так как они всегда будут одинаковыми в процентах от контейнера, в котором они находятся, независимо от того, является ли этот контейнер широким или узким.

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

В этом CodePen у меня есть примеры гибких компонентов Multicol, Flexbox и Grid, каждый из которых изменяет размеры и меняет свой макет в соответствии с доступным пространством. Здесь не используются медиа-запросы и очень мало строк CSS.

Увидеть перо Примеры методов компоновки «Отзывчивый по умолчанию» Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

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

Так как flex-основа для наших flex-элементов составляет 250 пикселей. Если для двух элементов размером 250 пикселей нет места, они будут перенесены; так как они могут расти (flex-grow является положительным значением), они будут расти и заполнять строки после переноса.

.media {display: flex; flex-wrap: обертывание; } .media> * {flex: 1 1 250px; } Компонент, когда достаточно места для отображения двух столбцов Компонент как один столбец

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

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

Увидеть перо Адаптивный дизайн без медиазапросов Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

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

grid {display: grid; разрыв сетки: 1em; grid-template-columns: 1fr; }

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

@media (min-width: 40em) {.grid {grid-template-columns: 2fr 1fr; } верхний и нижний колонтитул {grid-column: 1/3; }}

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

Увидеть перо Медиа-запросы и сетка Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

Рекомендации по работе с медиа-запросами

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

Не ориентируйте устройства, добавляйте точки останова, когда дизайн ломается

Когда мы впервые начали использовать медиа-запросы, у нас было всего несколько устройств для беспокойства. На самом деле, большинство людей беспокоились об iPhone. Однако в течение нескольких месяцев размеры устройств и устройств увеличивались. Больше нет смысла ориентироваться на отдельные устройства. Вместо этого добавьте точки останова, где ваш дизайн ломается. Если вы начинаете с дизайна для самого маленького устройства и начинаете тянуть окно браузера шире, когда строки становятся слишком длинными, чтобы их было удобно читать? Когда вы могли бы лучше использовать экран? Это тот момент, когда нужно добавить медиа-запрос и написать дополнительный CSS.

Работа таким образом означает, что любое устройство, входящее под этой точкой останова, получает узкую компоновку, а все, что входит через эту точку останова, получает компоновку, в которой больше используется горизонтальное пространство экрана. Не имеет значения, является ли устройство iPhone, телефоном Samsung или веб-дизайнером, играющим со своим окном браузера.

Это не все о пикселях

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

Будьте особенно осторожны при изменении порядка элементов Flex и Grid

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

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

Примечание . Подробнее об этой проблеме читайте в разделе « Flexbox и клавиатура навигации отключаются «.

Не забывайте вертикальные медиа-запросы

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

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

@media (min-height: 500px) {section {ширина столбца: 15em; }}

Медиа-запросы Уровень 4: Чего нам ожидать?

Медиа-запросы, которые мы использовали для Адаптивного Дизайна до сих пор, приходят из медиа-запросы Уровень 3 Спецификация. Новая спецификация медиа-запросов находится в стадии разработки в рабочей группе CSS, Медиа-запросы Уровень 4 , Эта спецификация внесет некоторые изменения в синтаксис и некоторые новые функциональные возможности. Здесь еще не все реализовано в браузерах, но интересно посмотреть, что может произойти в ближайшее время, чтобы помочь нам создать пользовательские интерфейсы, которые хорошо работают с широким спектром устройств и форматов вывода, которые у нас есть.

Определение типа указателя, а не размера экрана

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

Когда размер экрана был всем, что мы имели, то делать предположения на основе этого было все, что мы могли сделать, но это меняется. Мы можем искать лучшие показатели и использовать эти функции в комбинации при настройке нашего пользовательского интерфейса для разных пользователей. Более полезным индикатором устройства может быть то, какой тип указателя есть у пользователя и есть ли у него возможность навести курсор на элементы на странице. Именно эти функции Media Interaction предоставляют для медиазапросов, и приведенные ниже примеры будут работать в текущих версиях Chrome, Safari и Edge. Ты можешь проверить Могу ли я использовать для полного списка поддержки.

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

@media (pointer: coarse) {.which-pointer :: after {content: "У вас грубый указатель, вы на сенсорном устройстве?"; }} @media (pointer: fine) {.which-pointer :: after {content: "У вас точный указатель, вы используете мышь или трекпад?"; }}

Чтобы проверить, можете ли вы парить, я проверяю наличие функции наведения:

@media (hover) {.can-i-hover :: after {content: "Ты выглядишь так, как будто можешь парить."; }} @media (hover: нет) {.can-i-hover :: after {content: "Я не думаю, что вы можете парить."; }} Тестирование поддержки указателя и наведения на iPhone

Проверьте это сами в CodePen.

Увидеть перо Интерактивные медиа-запросы Рэйчел Эндрю ( @rachelandrew ) на CodePen ,

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

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

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

Обнаружение переполнения с функциями отображения качества мультимедиа

Пока еще не реализована функция блокировки переполнения Качество отображения мультимедиа с возможностью проверки поведения мультимедиа при переполнении контента.

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

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

@media (overflow-block: paged) {}

Изменения синтаксиса

Медиа-запросы, как мы их узнали, могут оказаться довольно многословными; на уровне 4 внесены некоторые изменения в синтаксис, чтобы помочь с этим. Например, мы часто хотим указать диапазон, такой как приведенный ниже Media Query, который ищет ширину от 40em до 59em.

@media (min-width: 40em) и (max-width: 59em) {}

Мы могли бы переписать это как диапазон:

@media (40em

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

Медиа-запросы по-прежнему являются полезным инструментом, который мы имеем в нашем распоряжении при создании адаптивных макетов. Я видел, как люди прыгали через обручи с Grid, чтобы попытаться избежать вызова, но нет причин избегать полезных медиа-запросов. Как я надеюсь, я продемонстрировал, что также появятся новые и полезные функции, которые помогут нам улучшить наши пользовательские интерфейсы для большего количества пользователей. Чтобы узнать больше, вот несколько дополнительных ссылок, статей и презентаций. Некоторые из них я использовал при подготовке этой статьи, другие делают для дополнительного полезного чтения.

Похожие

Комментарии