当前位置：文江博客话题详情

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

发布于 2024-12-03 21:19:22 字数 294 浏览 3 评论 0原文

有人可以解释一下 http://cssgrid.net/ 是如何实现当浏览器宽度低于一定值时，布局从 3 列切换为单列？

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请远离我 2024-12-10 21:19:22

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

/* Smaller screens */

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

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

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

It's the media queries at the bottom of the main CSS:

/* Smaller screens */

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

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

These apply different rules based on the browser dimensions, and are helped out by a JS class for older browsers.

回复收藏 0 原文

情话墙 2024-12-10 21:19:22

@本；为此需要使用 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 &当屏幕宽度减小到 600 像素时，new-css.css 应用。

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

@ben; for this need to use mediaqueries .It's new property in which we define the css according to the width. Like this:

<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" />

In the above example the apx.css is your default css & and new-css.css apply when your screen width decrease to 600px.

That a best link for your answer http://css-tricks.com/6206-resolution-specific-stylesheets/

Check this for more http://webdesignerwall.com/tutorials/css3-media-queries

回复收藏 0 原文

~没有更多了~