css 使用媒体查询的Outlook HTML电子邮件

6vl6ewon 于 2022-11-19 发布在其他

关注(0)|答案(1)|浏览(262)

我知道大多数电子邮件客户端不是媒体查询的粉丝，但他们确实以有限的格式支持它们。
所有我试图做的是改变一个链接的字体大小。

<style type="text/css">
    .link {color: rgb(133, 16, 16); font-size: 24px;}

    @media only screen and (max-width: 420px) {            
        .link {font-size: 14px !important;}
    }
</style>

<a href="#" class="link">DOWNLOAD</a>

在浏览器中可以正常工作，但在电子邮件中就不行了。有人能看到我遗漏的东西吗？

css

来源：https://stackoverflow.com/questions/73276314/outlook-html-email-using-media-queries

1条答案

按热度按时间

oyxsuwqo1#

您通常需要内联样式，因为某些电子邮件客户端不支持<style>块。
不确定您使用的是什么客户端/版本/设备，但该代码可以在一些上工作。
但是，考虑内联mobile-first，因为这将覆盖Gmail IMAP，然后使用min-width覆盖桌面。您还需要一些用于Outlook Windows的东西，因为它不接受<style>块，所以这里我使用“mso-ansi-font-size”，它将优先于font-size。
这适用于所有主要电子邮件：

<head> <!-- I needed to put a little bit of structure -->
<style type="text/css">
    
        @media only screen and (min-width: 420px) { <!-- Note this is for desktops -->   
            .link {font-size: 24px !important;}
        }
    </style>
</head>
<body>
    <a href="https://www.google.com.au" class="link" style="color: rgb(133, 16, 16); font-size: 14px;mso-ansi-font-size:24px;">DOWNLOAD</a> <!-- Note inlined; and Outlook alternative -->
</body>

如果你确实需要考虑一些非常老的桌面ISP，其中一些不支持<style>块，他们会显示移动的版本（14 px）。这是没有办法的。但我更喜欢这样，而不是桌面优先的方法，因为通常很少有人在我的名单上使用旧的桌面ISP，但很多人使用Gmail IMAP（通常是商业帐户）。
有关选择移动优先还是桌面优先的电子邮件方法的更多信息，请参见https://htmlemailprinciples.com/third-precedent-of-practicality

赞(0）回复(0）举报 2022-11-19

我来回答

css 使用媒体查询的Outlook HTML电子邮件

1条答案

相关问题

热门标签

最新问答