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

提问于 2024-04-28T05:39:37+08:00

浏览次

0

在我的表格表格中使用"display:block"时，我在Chris Coyier article上为我的响应表设计提供了一个很好的解决方案 .

/* 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”设置为更高分辨率的常规表视图时遇到了问题“@仅媒体屏幕和（最小宽度：768像素）{}“

感谢每一位帮助 .

2 回答

1
这是因为你的@media查询的“min-width”设置为0px . 本质上意味着，任何超过0px的窗口大小都会这样做 .

你需要的是使用“max-width：500px”作为例子 . 这将使@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“inspect element”测试应该使用的窗口宽度 . 它会给你一个方便的小盒子，告诉你当前的窗口宽度 . 播放并使用它来查找您想要显示的位置：阻止发生 .

记住max-width：*** px表示低于*** px和min-width的任何内容：*** px高于*** px .
回复于 2024-04-28T05:39:37+08:00
2
将 @media 调整为仅适用于您需要的宽度 . 例子：
```
@media (min-width: 0px) and (max-width: 767px) {...}
/* or just */
@media (max-width: 767px) {...}
```
这样，它将不适用于宽度大于 767px 的任何设备 .
回复于 2024-04-28T05:39:37+08:00

相关问题