vachevskiy.ru

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

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

медиазапросы

Что такое медиазапросы

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

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

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

Использование медиазапросов

Любой медиазапрос должен начинаться с объявления вида @media. После него следует перечисление различных правил, которые объединяют между собой с помощью запятой или логического оператор «and». При выполнении различных правил необходимо задать стилевые свойства, они должны быть обрамлены фигурными скобками. Ниже показан пример одного из медиазапросов.

Использование медиазапросов

Естественно существуют специальные правила, которые нужно рассмотреть более подробно. Основные из них — это media queries и media types.

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

Отвечают за размер устройства или отображаемой области (max-width/min-width, max-height/minheight и т.д.);

Отвечает за ориентацию экрана правило orientation;

За плотность пикселей отвечают правила max-resolution/min-resolution.

Правила используемые media types отвечают за то, каким способом будет воспроизведен медиазапрос. Всего их 4 штуки:

  • Speech – для программ по воспроизведению текста и речевых синтезаторов;
  • Screen – для экранов;
  • Print – страница печати;
  • All – все типы.

Использование медиазапросов в email

В отличие от верстки веб-страниц, email рассылки ограничены поддержкой клиентами языка стилей CSS. По статистике более половины всех электронных писем, которые получают пользователи, открываются с использованием мобильного устройства. До 2016 года медиазапросы поддерживались только стандартными приложениями, которые были установлены на Андроид и IOS. Тем самым охват аудитории был крайне малым.

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

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

Использование медиазапросов в email

Где есть поддержка медиазапросов

Первой компанией, которая анонсировала поддержку медиазапросов, стал Гугл, который объявил об этом в сентябре 2016 года. С осени 2017 года медиазапросы стали поддерживаться различными популярными почтовыми клиентами для мобильных устройств.

1 звезда2 звезды3 звезды4 звезды5 звезд (2 оценок, среднее: 4.50 из 5)


Leave a Reply to seoonly.ru