如何让 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 对媒体查询并没有任何可靠的支持，而且在移动响应电子邮件方面经常被“排除在外”。

此链接here 应该有助于解释电子邮件响应性并为您提供大量详细信息。

为了创建 html 电子邮件，我经常使用第三方软件，因为为不同的邮件客户端编写代码真的很痛苦。 我使用 beefree.io 创建电子邮件模板，我可以下载 HTML 5 格式。