@media打破Gmail CSS [英] @media Breaks Gmail CSS

查看:195
本文介绍了@media打破Gmail CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用MailChimp制作自定义模板。我还没有通过几个电子邮件客户端测试它,但是到目前为止,我使用gmail的测试显示,当我添加这个媒体查询时,它不仅不起作用,而且导致整个html电子邮件都没有css。其他CSS在没有查询的情况下对gmail正常工作。在其他客户端,媒体查询工作,并且不会阻止其他CSS工作。



这是gmail(和其他人)的已知问题,还是有一种方式完成这个?

  @media only screen 
and(max-device-width:480px){
.bodyContent div {
font-size:24px;
}
h1,.h1 {
font-size:36px;
}
h2,.h2 {
font-size:28px;
}
h4,.h4 {
font-size:28px;
}
.preheaderContent div {
font-size:24px;
}
}


解决方案

Gmail不支持< head> < body>中的< style> ; 。由于媒体查询是嵌入式的,而不是内联的,因此不能在Gmail中使用。从Campaign Monitor查看这个便利图表,详细了解各种客户端和应用程序支持的样式和选择器。


I am making custom template with MailChimp. I have yet to test it across several email clients, but so far my tests with gmail reveal that when I add this media query, not only does it not work, but it causes the entire html email to render without css. The other CSS works fine for gmail without the query. On other clients the media query works, and does not prevent the other CSS from working.

Is this a known issue with gmail (and others), or is there a way to accomplish this?

    @media only screen 
    and (max-device-width : 480px) {
       .bodyContent div{
            font-size:24px;
        }
        h1, .h1{
            font-size:36px;
        } 
        h2, .h2{
            font-size:28px;
        }
        h4, .h4{
            font-size:28px;
        }
        .preheaderContent div{
            font-size:24px;
        } 
    }

解决方案

Gmail doesn't support <style> in either <head> or <body>. Since media queries are embedded rather than inline, they can't be utilized in Gmail. Check out this handy chart from Campaign Monitor which details which styles and selectors are supported across various clients and apps.

这篇关于@media打破Gmail CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆