Можно ли создавать мобильные адаптивные размеры шрифтов в электронной почте HTML & CSS? - PullRequest
Новая
       18

Можно ли создавать мобильные адаптивные размеры шрифтов в электронной почте HTML & CSS?

0 голосов
/ 17 апреля 2019

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

Можно ли мне создать адаптивный размер шрифта?Могу ли я уменьшить размер шрифта до 80% при просмотре на мобильном телефоне?

Дайте мне знать, если это возможно

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

 <style type="text/css">@media only screen and (max-width:480px) {
     @-ms-viewport { width:320px; }
     @viewport { width:320px; }
     body {font-size:80%; }
     }

Я ожидаю, что размер шрифта уменьшится на определенный%, например, на 80% для мобильных устройств.

1 Ответ

2 голосов
/ 17 апреля 2019

Чтобы добавить определенный размер шрифта для мобильного телефона в текст своей электронной почты, используйте медиа-запрос, чтобы установить font-size для определенного размера экрана.Чувствительный «плавный» способ сделать это - использовать единицу ширины окна просмотра (vw) вместо пикселей.

Viewport-width использует 1% ширины окна просмотра в качестве стандартного размера для работы с,Например, viewport-width в iPhone7 составляет 750 пикселей, поэтому 1vw - 7.5px.В этом случае мы устанавливаем font-size: 2vw, чтобы получить 15px.Это зависит от размера экрана;по мере увеличения или уменьшения области просмотра шрифт будет отзывчивым.

Наряду с font-size нам также необходимо настроить line-height, чтобы обеспечить его согласованность.Экспериментирование с указанным здесь числом может дать разные результаты, и в приведенном выше случае достаточно line-height:3vw, чтобы текст не был сжат.

Чтобы шрифт не стал слишком большим, мы добавляем егок классу в медиа-запросе, который будет работать только с меньшим размером области просмотра.Чтобы обеспечить отображение font-size в наших медиа-запросах, мы включаем !important для переопределения стиля встроенного шрифта.Проверьте пример кода ниже: 

<style type="text/css">
@media screen and (max-device-width:640px), screen and (max-width:640px) {
.mobfont {
font-size: 2vw!important;
line-height: 3vw!important;
}
}
</style>

Затем мы добавляем класс mobfont к любому тексту, размер которого мы хотим изменить:

<td style=”font-family: ‘Timmana’, Helvetica, Arial, san-serif;” class=”mobfont”>Responsive Text</td>

Подробнее здесьесли тебе это нужноhttps://www.emailonacid.com/blog/article/email-development/best-font-for-email-everything-you-need-to-know-about-email-safe-fonts

...