我正在开发一个需要对移动设备做出响应的电子邮件模板。
以下是我的媒体查询:
@media only screen and (max-width: 639px){
.mobileHide{display:none !important;}
}
我的HTML:
<td style="padding:0 0 0 50px;margin: 0;vertical-align: top;" class="mobileHide">
<div style="font-family: Calibri,Arial,sans-serif;font-size:64px;font-weight:bold;color:#fec326;margin:0;">1</div>
</td>
我遇到的问题是在桌面上以639px以上的分辨率查看时隐藏.mobileHide元素
我需要它在桌面上可见并隐藏在移动设备上。
非常感谢任何想法或帮助! :)
答案 0 :(得分:2)
您需要反转样式,所以:
.mobileHide {
display: none;
}
@media only screen and (max-width: 639px){
.mobileHide {
display:block !important;
}
}
(max-width: 639px)
表示要应用此样式的页面的最大宽度,在本例中为639px
,因此您希望此display: block
为639px
。现在,对于少于display:none
,我们可以定义更一般的规则,即>639px
并将应用于{{1}}