@media打破Gmail CSS [英] @media Breaks 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>中的
。由于媒体查询是嵌入式的,而不是内联的,因此不能在Gmail中使用。从Campaign Monitor查看这个便利图表,详细了解各种客户端和应用程序支持的样式和选择器。 < style>
;
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屋!