1

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

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

然而，我遇到的问题是 max-device-width 设置为 480px。所以很自然地，人们会认为当超过这个值时，这些字段会返回。我的手机（诺基亚 Lumia 800）的分辨率为 480x800，所以在纵向它应该隐藏 tr。但是在横向中，它们应该重新出现，因为那将是 800x480 的分辨率。这本质上是我的问题。尽管进行了视口测试并且它说它是，但它们并没有重新出现。

有谁知道为什么会发生这种情况？

4

2 回答 2

1

本质上，您的代码中发生的事情是当用户低于 480 像素时，您告诉 css 隐藏元素并且状态保存在运行时。当用户超过 480 像素时，您没有规则可以将此元素带出 (display:none) 状态。

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

如果您有一个查询声明低于 480 像素显示：隐藏，则需要另一个查询来声明高于 480 像素显示：块。

于 2013-02-11T19:11:10.870 回答
0

尝试这个

对于 >480 像素的设备

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

对于小于 480 像素的设备

@media(max-width:480px){
 tr{
    display:none;  /* to hide table row*/
  }
}
于 2017-06-13T07:47:54.093 回答