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

Question

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

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

下面是一个视频链接，显示了一切如何根据屏幕尺寸发生变化:

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

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

我可以使用什么 CSS 让它在低于 1200 像素后切换到 4 列？

Answer 1

你可以使用css的@media属性如下:

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

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

这将仅适用于宽度 > 768px 的屏幕

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