css - 随着页面变窄，这种流动的列布局如何变为单列？

Question

有人能解释一下http://cssgrid.net/是如何实现当浏览器宽度低于一定量时，布局从3列切换到单列的效果吗？

我试过关闭 javascript，并检查 CSS，.row但.container我对 CSS 的了解不足。有一个min-width属性，但通过 Firebug 更改它似乎影响不大。

有人能指出 CSS 中的什么导致了这种变化吗？

Answer 1

这是主 CSS底部的媒体查询：

/* Smaller screens */

@media only screen and (max-width: 1023px) {
    ...
}

@media handheld, only screen and (max-width: 767px) {
    ...
}

它们根据浏览器尺寸应用不同的规则，并由旧浏览器的JS 类提供帮助。

Answer 2

@本；为此需要使用mediaqueries.It 的新属性，我们在其中根据宽度定义 css。像这样：

<link rel="stylesheet" href="stylesheets/apx.css" type="text/css" media="screen" title="no title" />
<link rel="stylesheet" href="stylesheets/new-css.css" type="text/css" media="screen and (max-width: 600px)" title="no title" />

在上面的示例中，这apx.css是您的默认 css & 并new-css.css在您的屏幕宽度减小到 600 像素时应用。

这是您回答的最佳链接http://css-tricks.com/6206-resolution-specific-stylesheets/

查看更多http://webdesignerwall.com/tutorials/css3-media-queries