最佳网页宽度及其实现

作者: 阮一峰

日期: 2008年7月27日

珠峰培训

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),实现网页宽度的自适应。

第一种方法的优点是,可以根据不同屏幕分辨率,采用完全不同的布局,缺点是要设计和维护多张样式表,比较麻烦。第二种方法只采用一张样式表,比较省事。

下文就根据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中是无效的。

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的范围内会自动伸缩。

5.

最后,建议大家平时使用计算机的时候,不要盲目采用高分辨率,意义不大。

(完)

一灯学堂

留言(16条)

3360x1050或许是两台1680x1050并排放着。

现在大部分人都是使用液晶,也就是说都是固定分辨率,所以也很少人会去“盲目采用高分辨率”。。。

引用huaxlee的发言:

3360x1050或许是两台1680x1050并排放着。


有道理

3360*1050 应该是两个 1680*1050 拼起来的

啊,我没看到 一楼的同志写的... 不好意思了

3360x1050
确实是,两个液晶跨行显示的

其实无所谓

看看新华社的网站,叠的象个鬼一样

说明这个站的人员其实也不怎么样

还有cctv的,

选一个最主流的就可以了

更多的等于是开销

为了那很少的人付出很大的代价,没意义

这个行业就是要技术差的代替技术高的。

技术高的去做其他的更有价值的事

这些东西其实都是未来技术解决的东西

随着web os的普及,css成为界面描述标准是必然

标准的统一,这些东西会在浏览器引擎上成为标准,自动解决

这是标准的问题

统一显示后端是趋势

我在读书公园那里看到你,你是站长吧。
那个网站的书怎么不可以下呢?

有时候,高分辨率是强制的。比如使用LCD的时候,只有采用默认分辨率才能得到最佳显示效果。高了或者低了,都会导致像素模糊。

还有一些更复杂的情况。比如我,现在用的是1050x1680分辨率,因为我把显示器竖放。这个分辨率适合于浏览网页,因为横向分辨率接近主流分辨率1024x768,而竖向的拉长一般不影响网页布局。

我现在在学习网页设计 请问做个宽度自适应的网页是不是里面所有宽度要求设定的网页元素都要用百分比啊?比如 每个图片什么的

我现在刚开始学习HTML,我看的一个教程里用这样的CSS语句实现网页自适应:

body {

margin-left: 15%;
margin-right: 10%;

}

顶楼主的,让我解决了,我的苦恼

Pro.CSS.and.HTML.Design.Patterns,里面有讲到fluid layout,感觉还是要配合outside-in box来用

3360x1050是双显,就如我这样的。

你的文章最后的那个文档信息那些文字很有质感,能告诉我是怎么做到吗?谢谢

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接