网页栅格系统研究:蛋糕的切法
作者：玉伯 来源：Taobao.com UI Team 发布时间：2008-10-24 17:07:00
首先澄清一个应用场景问题。研究（1）中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受青睐。
有个很有意思的网站是Yahoo!, 看起来是固定宽度布局，实际上在CSS中只要去掉一行，就能摇身一变自适应宽度了：
#page {
width: 70em;
}
为什么Yahoo!最后选择了定宽布局呢？这很可能是因为定宽布局比宽度自适应布局更容易控制。对于结构复杂的网站来说，可维护性和可扩展性非常重要。Yahoo!是以信息展示为主的门户型网站，960的宽度对于信息的阅读比较友善（Joe Clark写了一篇屏幕阅读时有关行长的有趣文章）。种种因素使得Yahoo!最后采用了定宽布局（Tommy Olsson总结了 每种布局设计的优缺点 ）。
这里将只关注定宽布局，适用的场景是搭建复杂的门户型网站。对于宽度自适应布局和相应的栅格系统，暂不讨论（根据实现的技术手段不同，宽度自适应布局又分为流体布局和弹性布局。我个人蛮喜欢弹性布局，以后有时间再研究）。
好了，已经将范围缩小到定宽布局的网页栅格系统，那我们开始吧。
并不遥远的750
还记得800×600的显示器不？虽然才时隔几年，感觉却好像是上个世纪的事了。Mark Boulton做了 最早的探索：
将750分割成均等的6份，这就形成了栅格系统，稍加组合划分就形成了两栏布局和三栏布局。Mark Boulton还研究了Gutter（垂直栏之间的间隙）对栅格的影响，有兴趣的可以阅读原文，或者跟着我往下看吧，下面将详细阐述。
几个术语和一个公式
一个标准的栅格系统，包括以下部分：
将Flowline的总宽度标记为W, Column的宽度标记为c, Gutter宽度标记为g, Margin的宽度标记为m, Column的个数标记为N, 我们可以得到以下公式：
W = c * N + g * (N - 1) + 2 * m
一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为：
W = c * N + g * (N - 1) + g = (c + g) * N
将c+g标记为C, 公式变得非常简单：
W = C * N
上面的公式就是栅格系统的基础，很简单吧。
0
投稿猜你喜欢
WeTest 导读小程序科普类的文章已经很多了，今天这里讲的是针对小程序的优化方法，可以有效提高小程序的响应速度和用户体验。当然，开发体验也- 隐患一：如果客户端机器的cookie一旦因病毒而失效了，那么session也就相当于没有了。 隐患二：session在php中默认的是以文件
- 写桌面程序或有些特殊操作的，经常需要访问剪切板。python有专用的模块，可以很方便简单的操作剪切板如下：#coding:utf-8impo
- 本文实例为大家分享了FormData上传多个文件的具体代码，供大家参考，具体内容如下由于项目中使用到，特此写个Demohtml代码：<
- 一、基本结构语句一）、条件语句age = int(input("请输入你家狗狗的年龄: "))print("&
- 这篇文章主要介绍了Python for循环搭配else常见问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价
- 1. 使用 fileinput 进行迭代fileinput 模块可以对一个或多个文件中的内容进行迭代、遍历等操作。该模块的 input()
- 什么是服务器端渲染(SSR)？Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操
- 本文实例讲述了PHP使用Face++接口开发微信公众平台人脸识别系统的方法。分享给大家供大家参考。具体如下：效果图如下：具体步骤如下：首先，
- 何为质数: 只能被1 和 自身 整除的数;方法: 利用js中求模, 看是否有余数. ---> 3％2 = 1; 5％2 = 3....
- 问题你想实现一个服务器，通过TCP协议和客户端通信。解决方案创建一个TCP服务器的一个简单方法是使用 socketserver 库。例如，下
- 前言在安装MySQL的时候会默认初始化几个MySQL运行所需的数据库：mysql, sys, information_schema, per
- loss函数如何接受输入值keras封装的比较厉害，官网给的例子写的云里雾里，在stackoverflow找到了答案You can wrap
- 一、初始化CounterCounter支持3种形式的初始化，比如提供一个数组，一个字典，或单独键值对“=”式赋值。具体初始化的代码如下所示：
- 上一文，介绍了vue.js动态添加、删除绑定的radio选项，本文介绍如何选中radio的某一项绑定的数据和上文的model是一致的，选中r
- 前言多线程一般用于同时调用多个函数，cpu时间片轮流分配给多个任务。 优点是提高cpu的使用率，使计算机减少处理多个任务的总时间；缺点是如果
- 爬一个网页时，要保存的数据都没有encode，就导致保存下来的中文都变成unicode了。。。那么，怎么把一个表示字符串的unicode还原
- omitempty在go中的使用直接上代码：package mainimport ( "encoding/json&q
- 问题你要处理由大量不同类型的对象组成的复杂数据结构，每一个对象都需要需要进行不同的处理。比如，遍历一个树形结构，然后根据每个节点的相应状态执
- 0x00 is与====运算符是比较两个对象的内容是否相等，默认情况是调用对象的__eq__方法进行比较；而is是比较两个对象是否一样，它比
