Question

我在Chris Coyier article的响应表设计方面得到了一个很好的解决方案，在我的表格中使用“display：block”。

/* Force table to not be like tables anymore */
@media only screen and (min-width: 0px){table, thead, tbody, th, td, tr { 
    display: block; 
}}

我在设计中使用了min-width而不是max-width（在文章中），现在我在设置“table，thead，tbody，th，td，tr”时遇到问题再次回到常规表视图中分辨率“@media only screen and（min-width：768px）{}”

感谢每一位帮助。

Answer 1

这是因为你有＆＃34; min-width＆＃34;在您的@media查询设置为0px。本质上意味着，任何超过0px的窗口大小都会这样做。

您需要的是使用＆＃34; max-width：500px＆＃34;例如。这将使@media查询中的css运行低于500px。因此，默认情况下，使用普通桌面视图，然后使用@media屏幕和（max-width：500px）{}用于移动表。

/* Force table to not be like tables anymore */ 
@media only screen and (max-width: 500px){
  table, thead, tbody, th, td, tr {
      display: block; 
  }
}

使用您喜欢和需要的屏幕宽度。我只是使用500px作为一个很好的例子。使用chromes＆＃34;检查元素＆＃34;测试你应该使用的窗口宽度。它会给你一个方便的小盒子，告诉你当前的窗口宽度。播放并使用它来查找您想要显示的位置：阻止发生。

记住max-width：*** px表示低于*** px和min-width的任何内容：*** px高于*** px。

Answer 2

将@media调整为仅适用于您需要的宽度。例子：

@media (min-width: 0px) and (max-width: 767px) {...}
/* or just */
@media (max-width: 767px) {...}

这样，它就不适用于任何宽度大于767px的设备。

小型设备的响应式表格设计 - 表格{“display：block”}

2 个答案: