我的媒体查询有点问题(我是新手使用这些,这是呈现html电子邮件响应的“最安全”方式)。
我的媒体查询:
@media only screen and (max-width: 600px){
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.submitBtn {
margin: auto !important;
float: none !important;
}
td, h3, h4, .branding, .paragraph, .container {
display: block !important;
width: 100% !important;
float: none !important;
height: auto !important;
margin: auto !important;
padding: 0 !important;
text-align: center !important;
}
td {
padding-right: 5px !important;
padding-left: 5px !important;
padding-top: 10px !important;
padding-bottom: 15px !important;
}
td.branding, img.branding {
display: block !important;
text-align: center !important;
margin: 0 auto !important;
}
.branding {
padding-bottom: 10px !important;
}
.toggle {
text-align: left;
}
table.center {
text-align: center !important;
}
.display-none {
display: none !important;
}
.checkbox {
display: block !important;
margin: auto !important;
max-width: 100% !important;
float: none !important;
}
}
作为一个注释,我确实有头部的设备宽度元。所有其他样式都是渲染,除了我有两个td,他们没有堆叠在移动设备上。
在chrome中,使用检查器并将其设置为响应,它显示它们应该在移动设备上堆叠,但是当我实际测试它时,它们不是。
我应该堆叠的第一个模块(我放置占位符以删除敏感数据)
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" align="center">
<tr>
<td class="branding logo" width="315" align="left">Stacking image goes here
</td>
<td class="branding" width="315" align="right"><span class="lighter">Text & More</span> <span class="normal">Stacking text goes here</span>
</td>
</tr>
</table>
我应该堆叠的另一点:
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" width="100%" align="center">
<tr>
<td class="description" align="left" width="75%">
<h4 class="indent padding-t"><span class="normal middle"></span></h4>
<p class="paragraph indent">Y
</p>
</td>
<td class="checkbox">
<input type="checkbox" id="checkbox" name="" onclick="changeValue()" value="">
<label class="toggle" for="checkbox"></label>
<input type="hidden" id="hidden" name="" checked value="">
</td>
</tr>
</table>
在此先感谢您的帮助,如果这是一个“菜鸟”错误,我深表歉意,因为我确信这是错误的!
事实证明,我的CSS顺序搞砸了一切。我删除了媒体查询中的所有样式并重新组织它,它就像一个魅力!