我正在尝试创建电子邮件签名,以便在移动设备上时,文字顶部与照片对齐。在桌面版本上,我的上边距为32px,媒体查询的上边距为0px。为什么我的媒体查询无法正常工作?
@media only screen and (max-width: 500px) {
.mobile {
visibility: hidden;
display: none;
}
.mtext {
margin-top:0px; !important
padding:0px; !important
}
}
<table width="100%" border="0" style="font-family:Arial, Helvetica,sans-serif;font-size:12px; margin-left:10px; margin-right:10px;">
<tr>
<td width="100" valign="top" align="left">
<img width="100px" src="https://www.pkallsc.org/wp-content/uploads/2018/04/Headshot-Jeffrey-Ashley-square-e1522622432938.jpg" style="float:left;" alt="John Smith" />
</td>
<td width="1249" valign="top" style="text-align:left; margin-left:5px; font-family:Arial, Helvetica, sans-serif; font-size:16px;" align="left">
<p class="mtext" style="margin-left:10px; margin-top:32px; font-family:Arial, Helvetica, sans-serif; font-size:14px; text-align:left;"> <strong>John Smith</strong>
<br />Chief Executive Officer<br /> 123 Central Suite, Suite 510 | Alpharetta, Georgia 30022<br /> T 800.800.8808 | D 800.800.0236 | F 800.800.2704
</p>
</td>
</tr>
<tr>
<td colspan="3">
<div class="mobile">
<hr style="border: 1.5px solid #49DBC3; max-width: 550px; margin-left:0;" width="80%" align="left">
<div>
<tr> <td colspan="9" align="left"><div class="mobile">
</div></td></tr><div> </div></div>
</table>
答案 0 :(得分:4)
@media only screen and (max-width: 500px) {
.mobile {
visibility: hidden;
display: none;
}
.mtext {
margin-top:0px !important;
padding:0px !important;
}
}
如果您需要使用!important
,则应该在;
之前