响应式电子邮件定位桌面答案

【问题标题】：Responsive Email Targeting Desktop响应式电子邮件定位桌面
【发布时间】：2013-11-21 17:19:44
【问题描述】：

我很难使用下面的媒体查询来定位桌面。

我有这个媒体查询，我想在比手机更大的东西上隐藏一个 tr

            @media screen and (min-device-width: 620px){
            tr[id = mobileHide] {
                    display: none !important;
                    width: 0px !important;
                }
            }

值得注意的是，当我在浏览器中查看 HTML 时，这是有效的。

这可能是 Outlook 的问题吗？我需要为outlook做一个条件标签来隐藏这个tr吗？

提前致谢

【问题讨论】：

标签： outlook media-queries html-email

【解决方案1】：

展望doesn't support CSS selectors。

另一件需要注意的事情是，根据您的 MS Exchange 服务器，有时您的媒体查询会被完全阻止，因此只需确认它们完全正常工作即可。

【讨论】：

【解决方案2】：

有可能。

尝试使用“@media all”，而不是 screen。很确定会解决它。

.. 如果不尝试隐藏td，而不是像您的代码中那样隐藏tr

【讨论】：

【解决方案3】：

@media only screen and (min-width:600px){
    .desktop-hide{display:none;}
}

还有 HTML 标记

<tr class="desktop-hide">
    <td>
        <p>Text only shown in Mobile clients that support media queries</p>
    </td>
</tr>

希望这会有所帮助。请记住，许多电子邮件客户端不支持媒体查询，因此即使 tr 显示，也要确保它看起来不错。

【讨论】：