使用CSS的流体布局

时间:2011-01-28 13:50:06

标签: javascript css

我注意到在一些使用流畅布局的网站上,可以删除页面上的元素,并在窗口缩小到较小尺寸时替换元素,显然是为了使内容更容易查看。

ex:http://simplebits.com/

我的问题是......用什么css来实现这个目标(如果它是css,也许是JavaScript ......)?为了更多地了解这种技术,我应该注意什么?

谢谢!

4 个答案:

答案 0 :(得分:8)

样式表包含不同规则,适用于屏幕宽度小于800px的情况。如果您查看页面983的样式表,则有@media规则,如下所示:

@media screen and (max-width: 800px) {
  /* Alternate rules here*/
}

这是一个CSS3功能,所以我猜这个网站不适合老版浏览器。有关媒体查询的详细信息,请参阅http://www.w3.org/TR/css3-mediaqueries/#width

答案 1 :(得分:5)

它使用CSS Media Queries。看一下CSS文件的结尾:

http://simplebits.com/-/css/styles.css

答案 2 :(得分:5)

这种类型的设计通常被称为"响应"设计,而"流体"设计通常被称为不固定宽度的设计。

您可以使用CSS媒体查询来制作这样的设计。

答案 3 :(得分:1)

关于这种技术的一篇有趣的文章(正如吉姆指出的那样称为响应式设计):

http://www.alistapart.com/articles/responsive-web-design/