Адаптивный веб-дизайн, как термин, был впервые введен Итаном Маркоттом. Это практика создания сайтов, внешний вид которых адаптируется под устройство пользователя. Адаптивная веб-страница в значительной степени зависит от медиа-запросов для настройки ее вида. Совсем недавно этот подход начал использоваться в электронной почте HTML.
Такой медиа-запрос имеет довольно простую структуру. Для электронной почты стили запроса вкладываются в тег <style>:
По сути, это одна таблица стилей внутри другой таблицы стилей, где медиа-запросы состоят из нескольких частей:
Такие запросы всегда открываются с помощью правила @media, затем идет ключевое слово. В данном случае «only» ограничивает отображение стилей медиа-запросов указанным типом медиа. После этого устанавливается тип носителя «media type». Наиболее часто используемые типы носителей — это экран и печать, что задает различные правила стиля для дисплеев и принтеров соответственно. За ним следует еще одно ключевое слово «and» и, наконец, «media feature», которая составляет основу медиа-запроса.
Существует множество различных мультимедийных функций, но, на самом деле, нас интересуют только две из них:
- Максимальная ширина (max-width)
- Максимальная ширина устройства (max-device-width)
Разница между ними заключается в том, как они вычисляют максимальную ширину, при которой запускается медиа-запрос. Параметр max-width измеряется относительно доступного пространства браузера, а max-device-width определяет размер экрана устройства. По сути, max-width покрывает все, а max-device-width покрывает небольшие дисплеи.
Чтобы охватить все, функция мультимедиа используется для нацеливания на область размером 480 пикселей или меньше. 480 пикселей — это стандартная ширина экрана мобильного телефона в альбомной ориентации. Эта цифра служит хорошей стандартной контрольной точкой для использования в коде.
Медиа-запросы и встроенные стили
Перед отправкой письма необходимо вручную или автоматически подключить CSS стили. Поскольку они работают с триггером и не являются стилями по умолчанию, нет смысла встраивать какие-либо из них. Итак, обычный CSS электронного письма должен быть встроен, а CSS медиа-запроса должен переопределить эти стили после его запуска.
Поскольку встроенные стили имеют наивысшую специфичность в каскаде, необходимо, чтобы каждое написанное правило стиля медиа-запроса было помечено !important:
Можно оставить стили медиа-запросов в раздела <head> вашего письма, поскольку клиенты, поддерживающие медиа-запросы, не удаляют области <head> или <style>.
Если у вас есть вопросы по Mailchimp, email маркетингу и написанию текстов для рассылок, запишитесь на консультацию.
