为何1024*768分辨率下网页的宽度为960px

iworm — Tue, 24 Feb 2009 15:04:08 +0000

昨天在学习用 {zh:栅格设计|栅格系统} 进行网页排版。
里面提到了适合1024宽度屏幕时，一般采用960px作为网页的宽度。
请到网页栅格系统研究（1）：960的秘密看原因。
我下面这段程序就是为了证明为什么960是比较合适的。

#!/usr/bin/python
# -*- coding: utf-8 -*-

#此代码证明使用栅格系统设计网页时, 为何1024分辨率最佳网页宽度是960px
MaxWidth = 1024
group = {}
#总宽度
for width in range(2, MaxWidth):
    count = 0
    #栅格宽度
    for gridWidth in range(2, MaxWidth):
        #如果可以有整数个栅格
        if width % gridWidth == 0:
            count = count + 1

    if group.has_key(count):
        group[count] = group[count] + ', ' + str(width);
    else:
        group[count] = str(width);

print group
#通过结果可知
#网页宽度为1008时, 最多可以设计含有29个纵向栅格的系统. 但是1008和1024之间只差了16px, 考虑到滚动条宽度 + 浏览器边框肯定大于16px, 所以不能使用1008px.
#使用960px最多可以设计含有27个纵向栅格的系统.
#使用990px最多可以设计含有23个纵向栅格的系统.

根据程序的运行结果以及我的一点简单分析，可以知道960px是很合适的。为什么不用990px宽呢？因为它仅仅比960px宽了30px，也就是几个字的宽度，但是减少了4个有效的栅格（也就是每个栅格的宽度变宽了，所以用的栅格少了），这可能会给某些情况下的排版会带来一定的问题。

想当摄影师的程序员 » 设计

为何1024*768分辨率下网页的宽度为960px