Question

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

我已经尝试关闭javascript，并检查.row和.container的CSS但我缺乏对CSS的了解。有一个min-width属性，但通过Firebug更改它似乎没有多大影响。

有人可以指出CSS导致更改的内容吗？

Answer 1

底部的媒体查询

/* Smaller screens */

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

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

这些规则会根据浏览器维度应用不同的规则，JS class会为旧浏览器提供帮助。

Answer 2

@ben;为此需要使用mediaqueries。这是我们根据宽度定义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＆amp;当您的屏幕宽度减少到600px时适用new-css.css。

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

选中此项以获取更多http://webdesignerwall.com/tutorials/css3-media-queries

当页面变窄时，这种流体列布局如何变为单列？

2 个答案: