Question

我在研究如何设计响应表的stackoverflow时发现了这个插件：

我正在使用它，它适用于移动和平板电脑屏幕尺寸，但它不适用于自定义尺寸（例如@media（最小宽度：901px）和（最大宽度：1280px））。问题是我的表有很多列并且非常宽，所以在某些屏幕尺寸上如上面它溢出并且插件不允许我设置“溢出：滚动”大小超过767px（或者说我无法计算如何）。

我想要做的是为767px以下和1280px以下的屏幕尺寸设置溢出。我希望我能很好地解释自己:)任何帮助都会受到极大的赞赏，因为我要把头撞到墙上。谢谢！

Answer 1

覆盖您拍摄的屏幕尺寸的溢出值的最简单方法是使用firebug来查找应用overflow：hidden的选择器。然后在媒体查询中复制该选择器并将overflow-x：滚动到其中。

例如，如果您查看链接的github仓库中的stylesheets / grid.css，则在第107行定义

.block-grid { display: block; overflow: hidden; }

如果您将其添加到文件之后：

@media (min-width:901px) and (max-width:1280px) {
    .block-grid { overflow: scroll; }
}

具有块网格类的所有元素将在指定的屏幕大小上使用滚动条（如果需要）。它们的关键是确保在您尝试覆盖的css类之后加载它，因为媒体查询不会向选择器的特异性添加任何内容。因此，如果多个媒体查询同时应用并且在其中具有相同的css选择器，则归结为最后找到的那个。