媒体查询不起作用，使用Rails Premailer
我一直在研究这个问题，根本没有找到解决方案。 Gmail（桌面网站）和Gmail应用程序中甚至都没有背景颜色。我尝试了以下事情。
- 添加视图
- 添加屏幕键，例如此@Media屏幕和（max-Width）{}。 我已经看到了“唯一”关键字的事件，
- 我已经看到了链接（即; https：//wwww.caniemail .com/search/？s =媒体）哪个显示Gmail仅支持几个属性。但是这些属性也行不通。
因此，我需要知道我们是否可以使用媒体查询？因此，如果它不起作用，我可以停止使用它。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>
<%=content_for(:title) %>
</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
@media screen and (max-width: 400px) {
#root, .upper-bar {
padding: 0 !important;
}
#child-cont {
border: none !important;
}
.upper-bar .slogan-text-cont {
text-align: center !important;
}
.pre-footer-section .steps-icon-cont {
width: 100% !important;
}
}
</style>
I have been looking into this issue and found no solution at all. Not even background color in Gmail (website from desktop) and in Gmail app. I have tried the following things.
- add viewport
- add screen key like this @media screen and (max-width) {}. event with 'only' keyword
- I have seen the links (i.e; https://www.caniemail.com/search/?s=media) which show Gmail support only a few properties. but those properties also not working.
So I need to know whether we can use media queries or not? So I can stop using it if it won't work.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>
<%=content_for(:title) %>
</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
@media screen and (max-width: 400px) {
#root, .upper-bar {
padding: 0 !important;
}
#child-cont {
border: none !important;
}
.upper-bar .slogan-text-cont {
text-align: center !important;
}
.pre-footer-section .steps-icon-cont {
width: 100% !important;
}
}
</style>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
发现Gmail，Outlook和类似邮件提供商的问题对您可以添加多少CS有一些限制。在该特定限制之后，您的CSS根本无法正常工作。因此，您已删除了一些CSS。因此，我确实删除了一些CSS，并自动所有CSS和媒体查询开始工作。不幸的是，对于这些邮件提供商，我找不到任何特定限制。
我发现自己是Gmail CSS限制的限制不仅仅是Outlook。因为当Gmail显示正确的样式并将同样的邮件发送到Outlook时，它不起作用。因此，我进一步减少了样式内容，然后CSS为Gmail和Outlook工作。
Found the problem that, Gmail, Outlook, and similar mail provider, has some limitations on how much CSS you can add. After that particular limit, your CSS won't work at all. So you have removed some CSS. So I did remove some CSS and automatically all my CSS and media queries start working. Unfortunately, I cannot find out any specific limit in any article for these mail providers.
I found myself that the Gmail CSS limit is more than outlook. Because when Gmail shows proper styling and sends the same mail to outlook, it didn't work for it. So, I further reduce the styling content, then CSS worked for both Gmail and Outlook.