昨天在学习用 {zh:栅格设计|栅格系统} 进行网页排版。
里面提到了适合1024宽度屏幕时,一般采用960px作为网页的宽度。
请到网页栅格系统研究(1):960的秘密看原因。
我下面这段程序就是为了证明为什么960是比较合适的。
# -*- 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个有效的栅格(也就是每个栅格的宽度变宽了,所以用的栅格少了),这可能会给某些情况下的排版会带来一定的问题。

The 为何1024*768分辨率下网页的宽度为960px by iworm, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 China Mainland License.
