【发布时间】：2018-08-01 17:58:48
【问题描述】：
我正在使用操作邮件发送此电子邮件模板
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<style>
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
img{
width: 100%;
}
}
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */
img{
width: 100%;
}
}
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
img{
width: 100%;
}
}
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
img{
width: 50%;
}
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
img{
width: 50%;
}
}
@media (min-width:1281px) { /* hi-res laptops and desktops */
img{
width: 50%;
}
}
</style>
</head>
<body>
<%= image_tag(attachments['banner.png'].url) %>
<p> Thanks for purchasing with us! </p>
<hr>
</body>
</html>
这样做的效果是在手机屏幕上，宽度被神秘地设置为 960px，如下图所示。根据媒体查询规则，我将其设置为 100%，这应该是父 div 容器的 100%，它应该很好地适合移动视图中的图像，但在移动视图中它将宽度设置为 960px，因此只显示部分图像.如何在移动屏幕上设置宽度：100% 而不是宽度：960px？谢谢！
更新：
要测试，请使用以下代码。您可以将以下模板用于操作邮件电子邮件。我正在使用 rails 和 action-mailer。使用 action-mailer 我发送以下 html 电子邮件。收到邮件后，请在手机中查看，您会看到图像远远超出屏幕宽度。在 chrome 中，您可以在移动模式下查看它并右键单击图像进行检查，您将看到最大宽度设置为 960 像素。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<style>
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
img{
width: 100% !important;
}
}
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */
img{
width: 100% !important;
}
}
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
img{
width: 100% !important;
}
}
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
img{
width: 50% !important;
}
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
img{
width: 50% !important;
}
}
@media (min-width:1281px) { /* hi-res laptops and desktops */
img{
width: 50% !important;
}
}
</style>
</head>
<body>
<%= image_tag('http://via.placeholder.com/5548x985') %>
<p> Thanks for purchasing with us! </p>
<hr>
</body>
</html>
【问题讨论】：
-
希望此链接对您有所帮助：litmus.com/blog/understanding-media-queries-in-html-email底部检查方案
-
我想说，如果您想为电子邮件做不同的布局，那么您/您的客户/您的公司正在以错误的方式进行电子邮件推广。内联样式是您处理电子邮件的方式。你可以在 mailchimp 上注册，看看他们是怎么做的。你在这个 IMO 上浪费时间。
标签： html css media-queries