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布局吗? 我认为是没有必要的。如果网站上有固定侧边栏, 那需要考虑的点有二.
- 我的侧边栏要放些什么? 要多大宽度才足够?
- 正文区域要取多少才方便内容分栏和读者阅读? (如果正文会出现 gallery, 还是要考虑分栏的)
为什么选择 950?
我们也可能会发现, 阿里系很多网站都是950, 为什么呢? 这个可能跟外边距有关。列于列之间存在边距, 所以边距数量比列数少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自己选择, 适合自己的最好。