我是响应式设计的新手，所以我提前道歉。我正在处理我当前的电子邮件，并使其中的一部分具有响应性。我有一封 3 栏的电子邮件，希望它堆叠到一栏，并使文本变大。我已经通过浏览器获得了成功的结果，但是一旦我在我的 iPhone 5 上检查它，我什么也得不到。我已经发送到 AOL、Gmail 和 Outlook 帐户，但没有人对其中一栏使用react。我在下面列出了我的风格。同样，我对整个媒体查询都不熟悉，所以如果看起来很荒谬，我深表歉意。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
@media only screen and (max-width: 660px) {
table.container {width: 100% !important; padding:0 4px;}
table.container {
text-align: center !important;
font-size:20px !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
}
}
@media only screen and (max-width: 568px) {
table.container {width: 100% !important; padding:0 4px;}
table.container {
text-align: center !important;
font-size:20px !important;
}
.templateColumnContainer {
display:block !important;
width:100% !important;
}
}
@media only screen and (max-width: 480px) {
table.container {width: 100% !important; padding:0 4px;}
table.container {
text-align: center !important;
font-size:20px !important;
}
.templateColumnContainer {
display:block !important;
width:100% !important;
}
}
@media only screen and (max-width: 320px) {
table.container {width: 280px !important; padding:0 4px;}
table.container {
text-align: center !important;
font-size:20px !important;
}
.templateColumnContainer {
display:block !important;
width:100% !important;
}
}
</style>
</head>
最佳答案
Gmail、AOL 和 Outlook.com 所有 do not support媒体查询。尝试将其发送到 iPhone 上的默认邮件阅读器。
关于css - 响应式电子邮件在 iPhone 上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21589201/