Медиа-запрос CSS не работает в электронной почте HTML

#css #media-queries #html-email #mjml

#css #медиа-запросы #html-электронная почта #mjml

Вопрос:

Когда я создаю электронное письмо, я использую медиа-запросы для настройки стиля для смартфонов. Проблема в том, что если я смотрю на HTML-файл в браузере, все работает нормально, но когда я отправляю тестовое письмо на свой телефон, все стили, заданные в медиа-запросе, исчезают.

Код:

     @media only screen and (max-width:768px) {
    * {
       background-color: red; (for testing)
    }
    body > div > div > table > tbody > tr > td {
        padding: 10px !important;
    }
    .image {
        margin: 15px 0 !important;
    }
    .footer-icon-container {
        width: 75px !important;
    }
    .title {
        padding: 10px 0px !important;
    }
    .avatar > table > tbody > tr > td {
        padding: 40px 0 0 30px !important;
    }
    .sub-title > table > tbody > tr > td {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

Может кто-нибудь объяснить мне, что я делаю не так и что я могу попытаться исправить? Я тестирую электронную почту в новейшей версии Gmail на Android 10 на OnePlus 8, если это поможет.

1. пожалуйста, поделитесь с нами своим html-кодом

2. Является ли ваша учетная запись @gmail.com учетная запись или электронное письмо, не относящееся к gmail? Ваши электронные письма будут отвечать по-разному emails.hteumeuleu.com /…

3. Натан был прав. Я не использовал учетную запись @gamil в приложении gmail, и это вызвало проблему.

Ответ №1:

Для электронных писем вам необходимо встроить свой css. Известно, что GMail удаляет css, и медиа-запросы не работают.

Вы можете настроить таргетинг на Gmail с помощью этого:

 u ~ div .class-name{
    display:inline !important;
}

и gmail на Android:

 div > u   .class-name{
    display:inline !important;
}

Вам придется поиграть с ним, насколько это касается селекторов, чтобы приспособить вашу структуру.

1. Можете ли вы встроить медиа-запросы?

2. Утверждение, что медиа-запросы не работают, не совсем верно. Существуют разные типы учетных записей Gmail, и медиа-запросы работают, если в CSS нет ничего, что ему не нравится. Я предлагаю удалить * , и это, вероятно, сработает. Однако, если у вас есть учетная запись, отличная от gmail, использующая приложение Google, даже медиа-запросы будут удалены. Но все остальные случаи хороши.

3. нет, вы не можете встроить медиа-запросы, но вы можете использовать тот же код. вам нужно будет выяснить, как он вписывается в ваш макет

4. Ты спас мой день, приятель. Работал для меня только для Gmail web, как я и ожидал. Спасибо 🙂