【发布时间】：2014-01-12 05:34:57
【问题描述】：
我正在创建一个响应式电子邮件。在我的电子邮件模板中，我包含了这个标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
并为移动设备添加了这些样式属性：
@media only screen and (max-device-width: 799px) {
div[class="column"] {
width: auto!important;
float:none!important;
}
.reasonDiv {
float:none!important;
padding-left: 12px!important;
padding-top: 35px!important;
}
.image {
width: 10px;
height: 10px;
}
.message {
padding-top: 10px!important;
}
.productImage {
width: 64px!important;
height: inherit!important;
}
.siteLogo {
width: 180px!important;
}
}
样式属性不适用于移动设备！请帮忙！谢谢。
【问题讨论】：
-
您的测试情况如何？您是否在移动设备上实际访问该站点？使用
max-device-width意味着它只会影响物理设备。试试max-width，这样你就可以在你的电脑上调试了。 -
我不知道确切的原因，但请注意大多数电子邮件客户端不支持媒体查询，您也可能想要使用 max-width 而不是 max-device-width 并查看如果可行
-
是的，我正在使用 Mandrills 测试电子邮件功能。
-
我已经尝试过了，但没有成功。这非常令人难以置信。它适用于我的模拟器，但不适用于我的手机。
-
如果图像小到不能因为屏幕尺寸而调整大小，但需要调整大小，因为它会挤压页面上的所有其他内容，我可以使用什么来使其更小？跨度>
标签： html css mobile responsive-design