我正在使用 action mailer 发送此电子邮件模板
<!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%，这应该很好地适合移动 View 中的图像，但在移动 View 中，它将宽度设置为 960px，因此只显示部分图像.我怎样才能在移动屏幕上将其设置为 width: 100% 而不是 width: 960px ？谢谢!
更新:
要进行测试，请使用以下代码。您可以将以下模板用于操作邮件电子邮件。我正在使用 rails 和 action-mailer。使用 action-mailer 我发送以下 html 电子邮件。收到邮件后，请在手机上查看，您会发现图片远远超出了屏幕宽度。在 chrome 中，您可以在移动模式下查看它并右键单击图像进行检查，您将看到最大宽度设置为 960px。
<!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>
最佳答案
电子邮件模板支持媒体查询。您需要在 head 标签内如下设置视口(viewport)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
关于html - 媒体查询在 html 电子邮件中不起作用吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51629031/