固定宽度弹性布局(以适应各种各辨率)
2009-07-21 09:33
281 查看
最佳网页宽度及其实现——新手可了解一下
1.设计网页的时候,确定宽度是一件很苦恼的事。
以minifun.cn为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。最小的分辨率是122x160,这应该是手机;最大的分辨率是3360x1050,天知道是什么设备。
一张网页要在大小如此悬殊的各种屏幕上,都呈现令人满意的效果,难度可想而知。举例来说,一张400px宽的图片,在800px的屏幕上会占据50%的宽度,而在1920px的屏幕上(Windows Vista的流行设置),只占据20%。
2.
目前,常见的屏幕分辨率宽度大概有6种:800px,1024px,1280px,1440px,1680px和1920px。其中,1024px最常见,但是随着大屏幕显示器的流行,更高的分辨率正变得越来越多。
常见的解决方法有两种:
第一种:用javascript根据不同的客户端分辨率,选择css样式表文件。
第二种:采用弹性布局(Fluid Width Layout),实现网页宽度的自适应。
第一种方法的优点是,可以根据不同屏幕分辨率,采用完全不同的布局,缺点是要设计和维护多张样式表,比较麻烦。第二种方法只采用一张样式表,比较省事。第二种:采用弹性布局(Fluid Width Layout),实现网页宽度的自适应。
下文就根据css-tricks上的解决方案,讨论如何实现第二种方法,实际上是很简单的。
3.
首先,网页的缺省宽度,确定为满足1024px宽度的显示器。这不仅因为1024x768是现在最常见的分辨率,还因为这个宽度对网页最合适:1)它放得下足够的内容,足够三栏的布局;2)单行文字不宜太长,1024px已是极限,否则容易产生阅读疲劳;3)在当前的互联网带宽条件下,网页难以采用大分辨率所要求的大尺寸图片。
其次,网页宽度会在780px-1260px的范围内,自动变化,即最小不小于780px,最大不超过1280px。
最后,对于更大的分辨率,网页内容会自动居中。
4.
下面就是CSS文件的写法,只要4行。需要注意的是,这几行的语句都针对整个页面,即body标签或者最外层的那个div区域。
margin: 10px auto;
这一行保证了网页在任何分辨率下,都会居中。min-width: 780px;
max-width: 1260px;
这二行规定了网页的最小和最大宽度。注意,IE6不支持这二行,即它们在IE6中是无效的。max-width: 1260px;
width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");
这一行是针对IE6的解决方法。它采用了CSS表达式,也可以通过javascript实现。 另外,如果想让内层的各个区块也自动伸缩,它们的宽度可以采用百分比的形式,比如:#div-left{
width:50%;
}
#div-right{
width:50%;
}
通过变动浏览器窗口的大小,可以发现网页在780px-1260px的范围内会自动伸缩。width:50%;
}
#div-right{
width:50%;
}
5.
最后,建议大家平时使用计算机的时候,不要盲目采用高分辨率,意义不大。
(完)
相关文章推荐
- CSS实现左侧固定宽度右侧自适应的固比布局
- 两列布局——左侧宽度固定,右侧宽度自适应的两种方法
- 固定宽度、流体和弹性布局
- 两列布局——左侧宽度固定,右侧宽度自适应的两种方法
- ABC三栏布局,AC固定宽度,B自适应
- 左右固定宽度,中间自适应的三列布局
- 两列布局——左侧宽度固定,右侧宽度自适应的两种方法
- web前端之CSS设计指南二:页面布局(固定宽度、流动、弹性)
- 实现左边宽度固定,右边宽度自适应的两列布局
- 总结几种实现右边宽度固定,左边宽度自适应的css布局
- 固定宽度边栏另一边自适应的布局(自己加了个改善)
- CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- 两列布局——左侧宽度固定,右侧宽度自适应的两种方法
- 通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
- CSS-两侧固定宽度,中间自适应的三列布局
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
- [CSS布局]3列布局:左右两列固定宽度、中间列自适应满宽
- css 左右固定,中间自适应的布局
- CSS——实现两侧固定中间自适应的布局(PC)