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

昨天在学习用 {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个有效的栅格(也就是每个栅格的宽度变宽了,所以用的栅格少了),这可能会给某些情况下的排版会带来一定的问题。

Share
This entry was posted in 设计 and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">