Как заставить медиазапросы CSS правильно работать в Outlook / Gmail?

Question

Похоже, что когда я кодирую приведенное ниже в электронное письмо и отправляю его, Outlook и Gmail (и, возможно, другие почтовые клиенты для настольных компьютеров) отображают обе таблицы (, с которыми я пытаюсь столкнуться) решить за ). Но когда я смотрю на своем мобильном телефоне, он соответствует медиазапросам CSS, и только отображает элемент таблицы с классом «mobile». Я не уверен, почему это, я делаю что-то не так? Вот мой код:

<style type="text/css" media="screen">
    @media only screen and (max-width: 480px) and (min-width: 0px) {
        table[class="desktop"] {
            display: none;
        }

        table[class="mobile"] {
            display: block;
        }
    }

    @media only screen and (max-width: 4000px) and (min-width: 481px) {
        table[class="desktop"] {
            display: block;
        }

        table[class="mobile"] {
            display: none;
        }
    }
</style>
<table border="1" cellpadding="10" cellspacing="0" width="100%" class="desktop">
    <tr>
        <td align="center" colspan="4">Standard Option
        </td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td colspan="4" align="right" style="text-align: center;">NON-POSTAL PREMIUM
        </td>
    </tr>
    <tr>
        <td></td>
        <td>Code</td>
        <td>Biweekly</td>
        <td>Monthly (Retirees)</td>
    </tr>
    <tr>
        <td>Self Only</td>
        <td>341</td>
        <td>$57.84</td>
        <td>$125.31</td>
    </tr>
    <tr>
        <td>Self Plus One</td>
        <td>343</td>
        <td>$124.35</td>
        <td>$269.42</td>
    </tr>
</table>
<table border="1" cellpadding="" cellspacing="0" width="480" class="mobile">
    <tr>
        <td align="center" valign="top">
            <table align="left" border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td>Standard Option (NON-POSTAL PREMIUM)</td>
                </tr>
            </table>
            <br style="clear: both;" />
            <table align="left" border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td><b>Self Only</b></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Code</td>
                    <td>341</td>
                </tr>
                <tr>
                    <td>Biweekly</td>
                    <td>$57.84</td>
                </tr>
                <tr>
                    <td>Monthly (Retirees)</td>
                    <td>$125.31</td>
                </tr>
            </table>
            <br style="clear: both;" />
            <table align="left" border="1" cellpadding="10" cellspacing="0" width="100%">

                <tr>
                    <td><b>Self Plus One</b></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Code</td>
                    <td>343</td>
                </tr>
                <tr>
                    <td>Biweekly</td>
                    <td>$124.35</td>
                </tr>
                <tr>
                    <td>Monthly (Retirees)</td>
                    <td>$269.42</td>
                </tr>

            </table>
            <br style="clear: both;" />
            <table align="left" border="1" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td><b>Self and Family</b></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Code</td>
                    <td>343</td>
                </tr>
                <tr>
                    <td>Biweekly</td>
                    <td>$136.78</td>
                </tr>
                <tr>
                    <td>Monthly (Retirees)</td>
                    <td>$296.36</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Вот скриншот рендеринга в Outlook:

А вот скриншот рендеринга моего мобильного устройства:

Answer 1

Насколько я знаю, Outlook, к сожалению, не имеет какой-либо надежной поддержки медиазапросов и часто "не учитывается", когда речь идет о мобильных адаптивных электронных письмах.

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

Для создания html-писем я часто использую стороннее программное обеспечение, потому что кодирование для разных почтовых клиентов - настоящая боль. Я использую beefree.io для создания шаблонов электронной почты, которые я могу просто скачать в формате HTML 5.