根据屏幕大小将列从 6 更改为 4 到 2

Question

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

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

以下是视频链接，展示了所有内容如何根据​​屏幕尺寸发生变化：

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

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

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

Answer 1

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

适用于宽度

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

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

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