Медиа-запросы в адаптивном дизайне 2018 / Хабр

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

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

Первое, что нужно сделать перед тем как написать медиа-запрос в 2018 году — спросить себя, нужно ли вообще его использовать. При построении сеток с использованием float мы создаем гибкую сетку, вычисляя размер наших колонок используя проценты. Эти проценты вычисляются методом Этана Маркотт (Ethan Marcotte), описанным в статье

. Этот метод лег в основу техники, которую мы теперь знаем как «отзывчивый дизайн». Чтобы изменить размер или пропорции колонок, мы должны добавить контрольную точку используя медиа-запрос и переопределить их. В работе с процентами других возможностей нет — колонки всегда будут равны проценту от контейнера, в котором они находятся, будь то широкий или узкий контейнер.

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

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

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

Допустим flex-basis для наших элементов составляет 250px. Если нет места для двух 250px колонок, они будут выстраиваться в колонку, а если задать положительный

.media {
    display: flex;
    flex-wrap: wrap;
}

.media > * {
    flex: 1 1 250px;
}

Контент в одну колонку

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

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

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

grid {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr;
}
 

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

@media (min-width: 40em) {
    .grid {
        grid-template-columns: 2fr 1fr;
    }

    header,
    footer {
        grid-column: 1 / 3;
    }
}

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

Медиа-запросы — лучшие практики

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

НЕ ОРИЕНТИРУЙТЕСЬ НА УСТРОЙСТВА, ДОБАВЬТЕ КОНТРОЛЬНЫЕ ТОЧКИ КОГДА СЧИТАЕТЕ, ЧТО СЕТКУ НАДО ПЕРЕСТРОИТЬ

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

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

СУЩЕСТВУЮТ НЕ ТОЛЬКО ПИКСЕЛИ

Создавая контрольные точки подумайте о переходе с пикселей. Слишком длинная строка текста является основным признаком, что пора задать контрольную точку. Лучше использовать

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

БУДЬТЕ ОСОБЕННО ОСТОРОЖНЫ МЕНЯЯ ПОРЯДОК FLEX И CSS GRID ЭЛЕМЕНТОВ

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

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

Примечание. Для получения дополнительной информации прочитайте статью «Flexbox & the keyboard navigation disconnect».

НЕ ЗАБУДЬТЕ ПРО ВЕРТИКАЛЬНЫЕ МЕДИА-ЗАПРОСЫ

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

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

@media (min-height: 500px) {
  section {
    column-width: 15em;
  }
}

Медиа-запросы Level 4: Что ожидать?

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

. Новая спецификация

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

Определяем устройство ввода, а не размер экрана

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

Раньше мы могли выяснить только размер экрана пользователя, сейчас ситуация несколько иная. Теперь мы можем определить может ли пользователь наводить на элементы, а так же тип его указателя, будь то палец или мышь. Свойства pointer и hover помогут улучшить UX для разных типов пользователей и собирать более точные статистики. Приведенные ниже примеры будут работать в текущих версиях Chrome, Safari и Edge. Вы можете проверить, Can I Use для полного списка поддержки браузерами.

Нижеприведенный CodePen вы можете протестировать с любого мобильного браузера. Свойство content выведет результат проверки типа указателя, которым вы пользуетесь.

@media (pointer:coarse) {
    .which-pointer::after {
        content: "You have a coarse pointer, are you on a touchscreen device?";    
    } 
}

@media (pointer:fine) {
    .which-pointer::after {
        content: "You have a fine pointer, are you using a mouse or trackpad?";    
    } 
}

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

@media (hover) {
    .can-i-hover::after {
        content: "You look like you can hover.";    
    } 
}

@media  (hover:none) {
    .can-i-hover::after {
        content: "I don't think you can hover.";    
    } 
}

Тестирование поддержки курсора и состояния наведения на iPhone

Протестируйте сами в CodePen.

Существуют также свойства

и

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

«Проектирование страницы, основываясь на any-hover и any-pointer, вероятно, приведет к плохому UX, потому что свойства указывают только последний из доступных механизмов ввода. Тем не менее, авторы могут использовать эти свойства, чтобы определить функциональность, которую они хотят предоставить, на основе любых дополнительных указывающих устройств, доступных пользователю».

Firefox — браузер отстающий от реализации данного функционала. Вот

на этот баг. Надеюсь, вскоре мы увидим полную поддержку.

Переполнение контента и Display Quality Media Features

Пока еще не реализованное свойство

, часть

, позволит проверить то, как поведет себя блок при переполнении контентом.

Медиа-запросы должны быть разными когда происходит переполнение контента. Стандартный способ решения данной проблемы для планшетов и десктопа — добавление прокрутки. Но некоторые устройства, например, электронный рекламный щит не могут переполняться. Так же у нас есть, Paged Media, если вы выводите контент для печати,.

Есть еще одно полезное свойство, которое поможет определить на каком устройстве отображается контент — overflow: block. Например, вы хотите проверить Paged Media ли контент.

@media (overflow-block: paged) {

}

Синтаксические изменения

Медиа-запросы — такие, какими мы их знаем, достаточно объемные в написании. Изменения синтаксиса медиа-запросов Level 4 поможет с этим. Часто мы используем диапазоны, например между 40em и 59em.

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

}

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

@media (40em <= width <= 59em ) {

}

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

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

Как применяются медиа запросы CSS для создания адаптивных макетов: примеры работы с сеткой

От автора: в июле 2010 я написала статью на Smashing Magazine «создание мобильной версии сайта с помощью CSS3 медиа запросов». Прошло почти 8 лет, а статья все еще привлекает большой трафик. Я подумала, что было бы неплохо вернуться к этой теме теперь, когда у нас есть такие методы макетирования, как Flexbox и Grid Layout. Статья расскажет про то, как сейчас используются медиа запросы CSS в адаптивном дизайне, а также про то, что будет в будущем.

Нужны ли вообще медиа запросы?

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

.media { display: flex; flex-wrap: wrap; } .media > * { flex: 1 1 250px; }

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

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

Если необходимо что-то большее, то придется подключать медиа запросы. Медиа запросы превосходно работают с Grid – можно полностью переопределить сетку одной строкой CSS или изменить расположение элементов. Для этого вам не понадобится править разметку. Сначала я создам сетку в одну колонку для узких экранов.

grid { display: grid; grid-gap: 1em; grid-template-columns: 1fr; }

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

@media (min-width: 40em) { .grid { grid-template-columns: 2fr 1fr; } header, footer { grid-column: 1 / 3; } }

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

Лучшие практики медиа запросов

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

Не определяйте устройства — добавляйте брейкпоинты, когда дизайн должен меняться

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

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

Пиксели используются не везде

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

Уделите больше внимания сортировке flex и grid элементов

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

@media (min-height: 500px) { section { column-width: 15em; } }

Media Queries Level 4: Чего ждать?

До сих пор мы используем медиа запросы для адаптивного дизайна из спецификации media queries Level 3. CSS Working Group разрабатывает новую спецификацию Media Queries Level 4. Эта спецификация изменит синтаксис и некоторый функционал. Не все еще реализовано в браузерах, однако интересно узнать, что нас может ждать в будущем, что нам поможет создавать UI, хорошо работающий с широким диапазоном устройств и форматов вывода.

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

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

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

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

@media (pointer:coarse) { .which-pointer::after { content: «You have a coarse pointer, are you on a touchscreen device?»; } } @media (pointer:fine) { .which-pointer::after { content: «You have a fine pointer, are you using a mouse or trackpad?»; } <p>}

Для проверки возможности наведения курсора я тестирую функцию hover:

@media (hover) { .can-i-hover::after { content: «You look like you can hover.»; } } @media (hover:none) { .can-i-hover::after { content: «I don’t think you can hover.»; } }

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

Также есть функции any-pointer и any-hover, которые проверяют возможности любых указывающих устройств пользователя – противоположность первичных указывающих устройств, проверяемых через pointer и hover. Советую использовать их осторожно, поскольку переход пользователя с основного устройства может ухудшить UX. Спецификация предлагает:

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

Firefox отстает с реализацией Interaction Media Features. Можете подписаться и отслеживать баг по ссылке. Надеемся, в скором времени поддержка появится в этом браузере.

Определение переполнения с помощью Display Quality Media Features Link

Пока что не реализована функция overflow-block Display Quality Media Features с возможностью проверки того, как ведет себя медиа при переполнении контента.

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

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

@media (overflow-block: paged) { }

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

Медиа запросы, какими мы их знаем, могут быть довольно длинными. В level 4 внесено пару изменений в синтаксис, что поможет решить эту проблему. Например, нам часто необходимо задавать диапазон, как в медиа запросе ниже (работает в диапазоне ширины от 40em до 59em).

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

Его можно переписать в диапазон:

@media (40em <= width <= 59em ) { }

Во втором примере width должна быть больше или равна 40em и меньше или равна 59em. Этот способ намного короче, по сравнению с min- и max- в предыдущем примере. Вы сможете использовать старый синтаксис, он удаляться не будет. Более короткий способ – это бонус.

Медиа запросы – все еще полезный инструмент в создании адаптивных макетов. Я видел, как люди делали костыли на Grid, чтобы не задействовать медиа запросы. Однако нет причин избегать полезных медиа запросов. Надеюсь, я продемонстрировала, что есть новые и полезные функции, которые помогут улучшить UI для большего количества пользователей.

Автор: Rachel Andrew

Источник: //www.smashingmagazine.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Медиазапросы в адаптивной емейл-вёрстке — Блог EMAILMATRIX

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

Я поделюсь с вами приёмами использования медиазапросов для вёрстки писем, которые мы применяем в агентстве EMAILMATRIX.

Что такое медиазапросы в емейл?

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

Специально для решения подобных задач разделяют структуру веб-страницы и её оформление. Для описания структуры используют HTML, а для описания оформления — каскадные таблицы стилей (CSS). В них задают расположение блоков, их размер, цвет, параметры шрифта и ряд других параметров.

Чтобы определённые стили отображались только при выводе на конкретных типах устройств, в CSS используют правила @media, которые называют медиазапросами. Также медиазапросы используют, чтобы применять различные стилевые свойства в зависимости от характеристик устройства, например, ширины окна браузера, альбомной/книжной ориентации экрана, плотности пикселей и т. д. Это позволяет обеспечивать удобный пользовательский интерфейс на любом устройстве, например, при просмотре на планшете в альбомной или в книжной ориентации экрана.

Как использовать медиазапросы в емейл

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

Медиазапрос всегда начинается с объявления @media. Затем перечисляются правила работы медиазапроса, объединённые логическими операторами (and или запятой). В фигурных скобках перечисляются стилевые свойства, которые будут действовать при выполнении перечисленных правил.

Рассмотрим правила подробнее.

Правила media types

Они отвечают за способ воспроизведения медиазапроса. Правила могут быть следующие:

Правила media queries

Они отвечают за технические параметры устройств, на которых должен сработать медиазапрос. Поддерживаются начиная со стандарта CSS3. Правил media queries очень много, вот самые важные:

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

	@media (max-width: 600px) {
		/*styles*/ }

Медиазапросы в емейл

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

По данным компании Litmus, более половины (53%) электронных писем открываются на мобильных устройствах. Однако до сентября 2016 года медиазапросы поддерживались только стандартными почтовыми приложениями на iOS и Android — это обеспечивало небольшой охват аудитории.

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

Если не учитывать особенности отображения, то может получиться следующее:

Для максимального охвата аудитории следует использовать «резиновый подход» совместно с блочной адаптацией, который работает в любых мобильных почтовых клиентах. Его особенность — использование размеров, заданных в процентах, что позволяет письму подстраиваться под любую ширину устройства (для сохранения общего дизайна чаще всего ограничивают максимальную ширину). А в случаях, когда изменение размеров недопустимо, — например, у товарной сетки — применяется подход блочной адаптации. Блоки располагаются рядом и, если не умещаются в одну строку на устройстве, перестраиваются друг под друга.

Поддержка

В сентябре 2016 компания Google анонсировала поддержку медиазапросов в веб-интерфейсе и мобильном приложении Gmail.com. Это позволило более точно контролировать поведение блоков при адаптации, активно применять отдельные элементы (специальное мобильное меню, блоки скачивания мобильных приложений и т. д.) для мобильных версий писем и получить практически полную свободу в изменении структуры письма на мобильном устройстве в Gmail. Несмотря на то, что Gmail на российском рынке занимает лишь 3 место (после Mail.ru и Yandex), данное приложение установлено почти на каждом Android-смартфоне.

Этот шаг со стороны Google стал сигналом для других почтовых провайдеров. И спустя год компания Mail.ru (крупнейший почтовый провайдер в России) анонсировала поддержку медиазапросов в своих мобильных приложениях.

C октября 2017 года медиазапросы поддерживаются большинством мобильных почтовых клиентов, включая стандартные приложения Mail на iOS и Android, Gmail, Mail.ru, Outlook и Yahoo. Приложение от Yandex и другие менее популярные почтовые клиенты по-прежнему медиазапросы не поддерживают.

Особенности

Емейл-вёрстка отстаёт от привычной веб-вёрстки, но при этом отчасти повторяет её историю. Подобно CSS-хакам, которые активно использовались в нулевых, чтобы достичь желаемого отображения в Internet Explorer 6–7, в емейл-вёрстке применяются определённые приёмы, такие как условные комментарии, VML (векторный язык разметки от компании Microsoft, который применяется в письмах для вставки фоновых изображений и некоторых других приёмов) и ряд других. Рассмотрим те, что относятся к медиазапросам.

Наибольшее количество нюансов связано с Yahoo, поэтому остановимся на нём немного подробнее.

Чтобы добавить стили, которые интерпретируются только почтовым клиентом Yahoo, используете следующий медиазапрос:

	@media yahoo{
		/* styles * }

Стоит отметить ряд моментов:

• Yahoo поддерживает правило !important. Оно позволяет изменить приоритет задания стилевого свойства, в том числе перекрыть инлайновые стили, то есть те, что прописаны в атрибуте style элемента. Правило необходимо писать без пробела.
• Yahoo не поддерживает max-device-width, min-device-width и -webkit-min-device-pixel-ratio.
• Не используйте селекторы по атрибутам для решения бага в веб-интерфейсе Yahoo, как это делали пару лет назад, — эта проблема давно неактуальна. Они создадут проблемы при отображении в Gmail, который их не воспринимает.

Чтобы задать специальные стили, которые будут применены в мобильной версии письма (при условии, что ширина письма 600 px), медиаправило будет иметь следующий вид:

	@media screen and (max-width: 600px), screen and (max-device-width: 600px) {
		/* styles */ }

При этом Yahoo проигнорирует такую конструкцию. Чтобы задать стили для мобильной версии Yahoo, пропишите медиазапрос после :

	@media screen and (max-width: 600px) {
		/* styles */ }

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

Пример меню с эффектом «аккордеон»

Отображение блока по выбору пользователя

Нельзя однозначно сказать, стоит ли использовать медиазапросы как основной подход к адаптации писем. Для начала тщательно проанализируйте аудиторию. Выясните, какие почтовые клиенты используют подписчики и на каких операционных системах открывают емейлы.

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

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

Адаптивная верстка: media queries — AlexdevAlexdev

Добрый день, уважаемые читатели!

Сегодня я бы хотел продолжить обсуждение адаптивной верстки.

В прошлой статье мы обсудили, как сделать простенький адаптивный дизайн. После создания мы выявили 1 большой минус:

На небольших экранах изображения будут слишком мелкими.

Как решить проблему? Media Queries!

Данную проблему можно решить благодаря новой возможности CSS: media queries.

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

Рассмотрим пример:

@media screen and (max-width: 960px) {
    .class {
        background: red;
    }
}

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

Таким образом мы может подстраивать наши стили под каждый экран в отдельности.

Условия для Media Queries

Условия можно задать следующие условия:

@media screen and (max-width: XXXpx) { }
@media screen and (min-width: XXXpx) { }
@media screen and (min-width: XXXpx) and (max-width: YYYpx) { }
@media screen and (max-device-width: XXXpx) { }

Лично я чаще всего использую первое условие.

Способы подключения CSS-таблиц

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

<link rel="stylesheet" media="screen and (max-width: 960px)" href="big.css" />
<link rel="stylesheet" media="screen and (min-width: 480px)" href="small.css" />

<!-- для iPhone 4 -->
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

<!-- для iPad portrait and landscape -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

 Практика

Давайте доработаем пример из прошлой статьи:

HTML

<h2>...</h2>
<div>
    <div>
        <img src="../images/1.jpg" title="Деревья, листики..." />
    </div>
    <div>
        <img src="../images/2.jpg" title="Зима"  />
    </div>
    ...
</div>

CSS

h2 {
    font-size: 24px;
    text-align: center;
}
div.image_gallery {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
    max-width: 90%; /* контейнер не превышает 90% ширины экрана */
    min-width: 500px;
}
img {
    float: left;
    max-width: 31%;
    height: auto;
    padding: 1%; /* небольшие оступы для изображений */
}

Что получилось? Смотрим: демонстрация 1

При небольшом разрешении картинки становятся слишком мелкими, а текст в заголовке огромным.

Решим нашу проблему!

Добавляем Media Queries

Добавим в CSS следующий код:

/* прошлый CSS */
h2 {}
div.image_gallery {}
img {}

@media screen and (max-width: 768px) { /* разрешение планшета */
    h2 {
        font-size: 20px;
    }
    div.image_gallery {
        min-width: 320px;
    }
    img {
        max-width: 48%; /* 2 изображения в ряд */
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
}

Мы добавили проверку на разрешение. Если разрешение экрана меньше или равно 768 пикселей, то наша галерея перестраивается. В ряд у нас умещается теперь по 2 изображения (width 48% + padding 2%).

Демонстрация 2

В результате фотографии на экране планшета стали выглядеть намного лучше!

Теперь разберемся с экраном поменьше.

@media screen and (max-width: 480px) { /* разрешение смартфона */
    h2 {
        min-width: 320px;
        font-size: 16px;
    }
    div.image_gallery {
        width: 320px;
        min-width: 320px;
    }
    img {
        max-width: 98%;
        height: auto;
        padding: 1%; /* небольшие оступы для изображений */
    }
}

После добавления этого кода при разрешении экрана меньше либо равного 480 пикселей, изображения вновь перестраиваются и теперь отображаются по одному в ряд.

Демонстрация 3

Итог

Теперь мы имеет фотогалерею, которая удобно подстраивается под устройства. При желании можно добавить и другие разрешения (320 пкс, 960 пкс и т.д.).

Ничего сложного и такая хорошая возможность подстроить наш сайт под разные экраны!

Демонстрация 1

Демонстрация 2

Спасибо за внимание, жду вас в следующих статьях! Следующая статья: Адаптивная верстка: анимация

Подписывайтесь на рассылку 😉

Что-то осталось неясным, неточным? Пишите в комментариях!

@media screen and (min-width: 1230px) { 
}

@media screen and (min-width: 750px) and (max-width: 1229px) {

    body{
    display: none;
    }
}

@media screen and (min-width: 1230px) { 
}

@media screen and (min-width: 750px) and (max-width: 1229px) {

body{
display: none;
}
}

@media screen and (min-width: 750px) and (max-width: 1229px) {

body{
display: none;
}
}
@media screen and (min-width: 1230px) { 
}

  @media media-type and (media-feature-rule) {
  
}  

  @media print {
    тело {
        размер шрифта: 12 пунктов;
    }
}  

  @media screen and (width: 600px) {
    тело {
        красный цвет;
    }
}  

  @media screen и (max-width: 600px) {
    тело {
        цвет синий;
    }
}  

  @media (ориентация: альбомная) {
    тело {
        цвет: пурпурный;
    }
}  

  @media (hover: hover) {
    тело {
        цвет: пурпурный;
    }
}  

  @media screen and (min-width: 600px) and (Ориентация: альбомная) {
    тело {
        цвет синий;
    }
}  

  @media screen and (min-width: 600px), screen and (Ориентация: альбомная) {
    тело {
        цвет синий;
    }
}  

  @media not all and (ориентация: альбомная) {
    тело {
        цвет синий;
    }
}  

  * {
    размер коробки: рамка-рамка;
}

тело {
    ширина: 90%;
    маржа: 2em auto;
    шрифт: 1em / 1.3 Arial, Helvetica, без засечек;
}

ссылка,
а: посетил {
    цвет: # 333;
}

nav ul,
aside ul {
    стиль списка: нет;
    отступ: 0;
}

nav a: ссылка,
nav a: visit {
    цвет фона: rgba (207, 232, 220, 0.2);
    граница: 2px сплошной rgb (79, 185, 227);
    текстовое оформление: нет;
    дисплей: блок;
    отступ: 10 пикселей;
    цвет: # 333;
    font-weight: жирный;
}

nav a: hover {
    цвет фона: rgba (207, 232, 220, 0,7);
}

.связанные с {
    цвет фона: rgba (79, 185, 227, 0,3);
    граница: 1px сплошной rgb (79, 185, 227);
    отступ: 10 пикселей;
}

.sidebar {
    цвет фона: rgba (207, 232, 220, 0,5);
    отступ: 10 пикселей;
}

статья {
    нижнее поле: 1em;
}
  

  
    

      <заголовок>
        
      
      <основной>
        <статья>
          

             
 Овощи! 
 
            

              ...
            
          
          <сторона>
            

              ...