Какие единицы CSS безопаснее для HTML-письма?
Используйте px для фиксированных ширин/высот и % для адаптивных ширин. Избегайте rem/em/vw/vh в вёрстке - поддержка непоследовательна, Outlook часто их неправильно считает.
Кратко
- ✓
px- база для таблиц, отступов, шрифтов. - ✓
%подходит для жидкостных обёрток; проверяйте в Outlook. - ✓html2email помечает rem/em/vw в критичной вёрстке.
Используйте px для фиксированных ширин/высот и % для адаптивных ширин. Избегайте rem/em/vw/vh в вёрстке - поддержка непоследовательна, Outlook часто их неправильно считает.
| Единица | В письме |
|---|---|
px | Лучше всего для ширины, отступов, размера шрифта |
% | Подходит для обёрток (например 100%) |
em / rem | Рискованно; Outlook может считать неверно |
vw / vh | Избегайте; в письмах ненадёжно |
Поддержка CSS-единиц в письме.
Почему предпочтительнее px в письмах?
px отображается одинаково в клиентах, особенно в Outlook. Используйте для ширин таблиц, отступов и шрифтов, чтобы не было сюрпризов с масштабом.
Когда использовать %?
Процентные ширины на обёртках для адаптивности (например, внешняя таблица 100%). Внутренние контейнеры оставляйте фиксированными (600px).
rem/em безопасны?
Частично. В части клиентов неправильно считается корневой размер шрифта - текст или отступы сжимаются или растут. Для критичных размеров не используйте.
А vw/vh?
Единицы viewport в письмах ненадёжны. Outlook их игнорирует; Gmail может их ограничивать. Не используйте для вёрстки и размеров шрифта.
Как html2email находит рискованные единицы?
CssUnitValidator предупреждает, когда rem/em/vw/vh встречаются в свойствах, влияющих на вёрстку или читаемость.
line-height обязательно в px?
Да. Задавайте явные px или безразмерные значения (например, 24px или 1.4), чтобы текст оставался читаемым в Outlook и Gmail.
Как сделать адаптивность без rem?
Колонки в процентах плюс медиа-запросы, которые на узких экранах делают ячейки блочными. Базовые размеры оставляйте в px.
У кнопок padding в px?
Да. Используйте px для отступов, чтобы гарантировать область нажатия ~44px; проценты в части клиентов сжимаются.
Валидатор: предупреждение о rem/em в письме.
Цифры и источники
- Outlook непоследовательно рендерит rem/em; px предсказуем при рендере на Word.
- html2email помечает rem/em/vw/vh в критичных стилях вёрстки.
- Процентные ширины на обёртках плюс px внутри дают баланс адаптивности и стабильности.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатноБез карты и регистрации