css - 媒体查询问题。风景和肖像

Question

我已经围绕 stackoverflow 进行了一些搜索，但似乎都没有解决我的问题，因此我在这里发帖。

我有一张 table 。它有六排。我做了一个媒体查询(@media only screen and (max-device-width: 480px))，这样在手机上查看时表格不会扭曲页面。媒体查询本身本质上只是在做 display: none;在 tr 类上。

但是，我遇到的问题是最大设备宽度设置为 480 像素。所以很自然地人们会认为当超过时，字段会返回。我的手机(Nokia Lumia 800)的分辨率为 480x800，因此在纵向模式下它应该隐藏 tr。然而，在风景中，它们应该重新出现，因为那将是 800x480 的分辨率。这基本上是我的问题。尽管进行了视口(viewport)测试并且它说它是，但它们并没有重新出现。

有人知道为什么会这样吗？

Answer 1

本质上，当用户低于 480px 时，您的代码中发生的事情是告诉 css 隐藏元素并且在运行时保存状态。当用户超过 480px 时，您没有规则让这个元素脱离 (display:none) 状态。

CSS 以级联方式工作，因此最后一条规则将成为浏览器默认的规则。

如果您有一个查询说明低于 480 像素的显示:隐藏，您将需要另一个查询来说明高于 480 像素的显示:阻止。