Question

我正在开发一个需要对移动设备做出响应的电子邮件模板。

以下是我的媒体查询：

@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元素

我需要它在桌面上可见并隐藏在移动设备上。

非常感谢任何想法或帮助！：）

Answer 1

您需要反转样式，所以：

.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}}

CSS - 媒体查询电子邮件模板不起作用

1 个答案: