响应式电子邮件定位桌面

Question

我很难通过下面的媒体查询来定位桌面。

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

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

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

这或许是Outlook的问题吗？我是否需要为outlook隐藏此tr？

提前致谢

Answer 1

展望doesn't support CSS selectors。

需要注意的另一点是，根据您的MS Exchange服务器，有时您的媒体查询会被完全屏蔽，所以只需确认它们正在运行。

Answer 2

它可能。

尝试'@ all all ,,而不是screen。很确定会解决它。

..如果没有尝试隐藏td，而不是隐藏代码中的tr

Answer 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显示也要确保它看起来很好。