小型设备的响应式表格设计 - table {"display:block"}答案

【问题标题】：Responsive table design for small devices - table {"display:block"}小型设备的响应式表格设计 - table {"display:block"}
【发布时间】：2016-03-26 08:24:06
【问题描述】：

我与 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){}”

感谢每一个帮助。

【问题讨论】：

尝试将min-width更改为max-width和0px更改为767px

标签： html css responsive-design media-queries

【解决方案1】：

这是因为您将@media 查询中的“最小宽度”设置为 0px。从本质上讲，任何大于 0px 的窗口大小都可以这样做。

例如，您需要使用“max-width: 500px”。这将使@media 查询中的 css 运行在 500px 以下。因此，默认情况下，制作您的普通桌面视图，然后将 @media screen 和 (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 作为一个很好的例子。使用 chrome 的“检查元素”测试您应该使用的窗口宽度。它将提供一个方便的小框，告诉您当前的窗口宽度。玩一下并使用它来找到您想要显示的位置：阻止发生。

记住 max-width: ***px 表示低于 ***px 和 min-width: ***px 表示高于 ***px。

【讨论】：

【解决方案2】：

调整您的@media，使其仅适用于您需要的宽度。例子：

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

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

【讨论】：