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

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>

我遇到的问题是 .mobileHide 元素在桌面上以高于 639 像素的分辨率查看时被隐藏

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

非常感谢任何想法或帮助！ :)

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