关于页面的宽度: 950 还是 960?

今年年初, 我一直纠结于一个问题, 为什么我们的网站现在用 950px 布局, 而不是经典的 960px 布局?

960 的优势

记得大概一年前, 我到学校给师弟妹们讲网页布局的时候, 还以 Alibaba.com 为例引出 960 经典布局. 960 的最大好处是什么? 它是 2, 3, 4, 5, 6, 8, 10, 12, ... 很多常用的分栏和 gallery 分列数量的公倍数. 如果采用通栏布局, 那么我们可以轻松地算出每列的宽度.

前几天在做一个项目, 通栏无边框布局, 分 4 列, 如果我们的宽度是 960, 那我可以将列宽定义为 25%. 但就现在的 950, 我需要加一个外边距, 并将其一并算入, 如果列宽是 x, 外边距是 y, 那么 4x + 3y = 950.

请不要迷恋 960

嗯, 960 的最大优势是, 它是能支持 1024 显示宽度的, 兼容分栏方式最多的宽度值, 所以并广泛应用. 但是反过来想, 如果我的网站有固定的侧边栏, 那还有必要纠结于是否使用 960 布局吗?

我认为是没有必要的. 如果网站上有固定侧边栏, 那需要考虑的点有二.
1. 我的侧边栏要放些什么? 要多大宽度才足够?
2. 正文区域要取多少才方便内容分栏和读者阅读? (如果正文会出现 gallery, 还是要考虑分栏的)

为什么选择 950?

细心的同学可能会发现, 阿里系很多网站都是 950, 为什么呢? 我问过比我先来的同事, 有人说到我们用的一个 Column Grid Reset, 为了网站统一, 我们就只能用这样的布局. 显然这不是我想要的答案, 依我来看, 这个可能跟外边距有关.

列于列之间存在边距, 所以边距数量比列数少 1, 如 4 列的布局存在 3 个边距. 如果常用的外边距是 10, 那么有下面的分法.
2 栏: 470*2 + 10*1
3 栏: 310*3 + 10*2
4 栏: 230*4 + 10*3
5 栏: 182*5 + 10*4
6 栏: 150*6 * 10*5
8 栏: 110*8 + 10*7
...

也就是说, 如果是带外边距的布局, 那么 950 更加灵活. 由此看来, 做一个带侧边栏的网站, 或许 950 的扩展性或许更好.

后话

其实 980 的布局也很常用, 为什么? 交给大家自己思考.
950, 960, 还是 980 自己选择, 适合自己的最好.