Почему не работает @media (min-width: 640px) в почтовых шаблонах?

Question

[IliaMal]

Здравствуйте.

Необходимо сверстать письмо с адаптацией под мобильные устройства.
Пишу как для обычного html:

<style>
  .text--normal {
    font-size: 22px;
  }
  @media (max-width: 640px) {  /* или @media only screen and (max-device-width: 640px) */
    .text--normal {
      font-size: 16px;
    }
  }
</style>
<p class="text--normal">Произвольный текст</p>

Если проверяю в браузере то все Ок. Но в сервисе тестов писем стили для мобильных устройств игнорируются.

Как нужно верстать адаптивный дизайн для писем?
Можно ли как то запихать @media в нутро тега (<p style="{сюда}"></p>)?

Comments

[andand44]

Адаптивность в email можно делать с помощью max-width. Будет работать там, где нет медиа запросов. В приложении Gmail на смартфонах, например.
https://webdesign.tutsplus.com/ru/tutorials/creati...

Answer 1

[Сергей delphinpro]

Потому что ни один почтовый клиент не поддерживает медиа-запросы.
https://yandex.ru/search/?text=адаптивный+дизайн+д...

Comments

[profesor08]

gmail?

[Сергей delphinpro]

profesor08, круть. один поддерживает. нифига не легче.

Answer 2

[Iryna]

Все находится по первому запросу https://www.unisender.com/ru/blog/sovety/kak-svers...