根据屏幕大小使列从 6 变为 4 再变为 2

Question

目前我在 NSFW 视频托管网站上使用 Bootstrap 3.3.5 CSS。在首页上，如果屏幕宽度大于或等于 1200px，则有 12 个视频显示在 6 列，每列 2。当屏幕宽度低于 768px 时，这 6 列变为 2 列以更好地适应屏幕。

我要添加的是CSS如果屏幕小于1200px但大于768px，将显示4列。

下面是一段 link 视频，展示了一切如何根据屏幕尺寸发生变化：

此视频是 NSFW http://tinypic.com/r/fuosw3/9

如您所见，随着屏幕变小，缩略图变小，但一直保持 6 列，直到尺寸小于 768px 时变为 2。

在低于 1200 像素后，我可以使用什么 CSS 将其切换为 4 列？

Answer 1

您可以使用 css 的 @media 属性 如下：

这将适用于宽度 < 1200px 的屏幕

@media only screen and (max-width: 1200px) {
    <do your stuff>
}

仅适用于宽度 > 768 像素的屏幕

@media only screen and (min-width: 768px) {
        <do your stuff>
}