媒体查询问题。景观和肖像

Question

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

我有一张桌子。它有六排。我已经完成了媒体查询（仅@media屏幕和（max-device-width：480px）），以便在手机上查看时表格不会扭曲页面。媒体查询本身只是在做display：none;在tr类。

然而，我遇到的问题是max-device-width设置为480px。所以很自然地会有人认为，当超过这个数量时，这些字段就会返回。我的手机（诺基亚Lumia 800）的分辨率为480x800，所以在肖像方面它应该隐藏tr。然而，在景观中它们应该重新出现，因为这将是800x480的分辨率。这基本上是我的问题。尽管已经完成了一个视口测试并且它说它已经完成，但它们并没有再出现。

有谁知道为什么会这样？

Answer 1

基本上你的代码中发生的事情是当用户低于480px时，你告诉css隐藏元素并且状态在运行时保存。当用户超过480px时，您没有规则将此元素置于（display：none）状态之外。

CSS在级联中工作，因此给它的最后一条规则是浏览器默认的规则。

如果您的查询显示低于480px display：hide，则需要另一个查询来说明480px以上的显示：阻止。

Answer 2

试试这个

对于设备＆gt; 480px

@media(min-width:481px){
 tr{
    display:table-row ; /* to show table row*/
  }
}

适用于小于480像素的设备

@media(max-width:480px){
 tr{
    display:none;  /* to hide table row*/
  }
}