网页栅格系统研究（3）：粒度问题（2）
作者：玉伯 来源：Taobao.com UED Team 发布时间：2008-10-28 19:46:00
标签：栅格,栅格系统,网页设计,比例
然而，现实总那么残酷
（图5）
上图中的标题高度为22, 这在24列960栅格系统中是无法对齐的。而且总高度为100, 在24列960栅格系统中也不存在（110才可以）。或许高度方向上我们可以细化行宽为20, 但依旧没法解决上面两个问题（22是明显不能解决的，而对于100px的高度，也无法通过细化行宽来解决。可选高度永远是10的奇数倍，如果进一步细化，小于10后，会变得非常繁琐，没什么实际应用价值）
宽度世界里会好些吗
（图6）
上面是Yahoo!首页上的两个小模块，我都不想去标注模块里面的布局宽度了（因为一点都不符合24列960栅格系统）。宽度世界里，和高度世界一样充满希望但现实却残酷无比。
银弹是不存在的
栅格系统是美好的。但如果我们一味地追求将所有设计都栅格化（必须承认我曾有这个幻想），则立刻会陷入地狱一般的黑暗中。这篇文章中的艰难尝试（我分析了20多个小模块），让我突然醒悟到一个粒度问题：任何设计都有适用范围，超出最佳适用范围，强行使用只会带来无尽的烦恼。对于栅格系统（这里指所有栅格系统，包括多种栅格系统混合使用的情景）来说，我觉得以下场景非常适合：
页面的总体宽度布局，比如两栏、三栏等布局
一些固定区块的尺寸，比如广告图片的尺寸
区块之间的间距，可以参考栅格系统的槽宽（Gutter）
一些可以栅格化的小区域，比如图3中的例子，暗合栅格往往能简化布局上的考虑
除了上面这些应用场景，强行使用栅格系统，往往会束手束脚，适得其反。这篇文章的目的，就是尝试用最啰嗦最费神貌似很科学实际很无聊的分析来指出栅格系统应用时的粒度问题。在粒度问题上达成一致后，下一篇中我们将讨论栅格系统的技术实现，最后一篇则讨论栅格系统的压轴好戏：模块化开发。
0
投稿猜你喜欢
- 新浪天气预报代码，需要的朋友可以复制下面的代码到要显示的页面，新浪代码 ：<IFRAME WIDTH='260
这段时间写了很多页面代码，除了一些知识重复以外，也学到css的一些新东西，或许是旧东西，但是还是希望能对大家有用。其实在css里面有很多对a- 1．不装入数据库而启动事例 可以不装入数据库而启动事例，一般是在数据库才创建时才可以这样做：STARTUP NOMOUNT2.启动事例并装入
- 语言是信息传播的主要障碍。多语言网站，顾名思义就是能够以多种语言（而不是单种语言）为用户提供信息服务，让使用不同语言的用户都能够从同个网站获
- asp之家注：有时候我们想让程序运行变慢下来，asp中该怎么做呢？原理很简单就是在运行程序前运行一段无关紧要的程序就可以了，要实现加长程序的
- udf_WeekDayName 代码如下:CREATE FUNCTION [dbo].[udf_WeekDayName] ( ) RETUR
- 在讲CSS优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。首先，我们对CSS作一个简单的说明：CSS是层叠样式表（Cascadi
- 今天同学向我提了一个问题，我觉得蛮有意思，现记录下来大家探讨下。问题是：在一个表里面，有一个允许为空的字段，空是可以重复的，但是不为空的值需
- 如果您还不太了解XML技术，您可以先看看此文：XML的语法、结构以及相关的一些技术 及 XML DOM介绍和例子XML中 CDATA的作用：
- 主页上的鼠标是不是就只有箭头和小手两种模样呢？如果鼠标移到“帮助”等字样上时，形状就变成求助的问号；鼠标移到可能需要较长时间等待的超链接时，
- 如果是在Oracle10g之前，删除一个表空间中的数据文件后，其文件在数据库数据字典中会仍然存在，除非你删除表空间，否则文件信息不会清除。但
- MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发一个P2P应用的时候曾经使用MySQL来保存P2P节点,由
- 代码如下: var params = new Enumerator(Request.QueryString); while (!params
- 前几天玩了玩Google的Map API，感觉还不错，很简单。但凡有过任何编程经验的同学，看完以下的教程，都可以在10分钟内掌握它的主要功能
- javascript上下滑动广告效果 参数说明:客服果果(
- 鉴于ASP脚本语言是在服务器端IIS或PWS中解释和运行，并可动态生成普通的HTML网页，然后再传送到客户端供浏览的这一特点。我们要在本机上
- 今天研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果，具体方法如下：第一步：在连接样式表的元素里定义一个id,例如
- 1.查询高于平均价格的商品名称：SELECT item_name FROM ebsp.product_mark
- 第一类人，用户体验无所不能。第二类人，用户体验无所不包括。第三类人，用户体验只是指导思想。用户研究通常是做创新的工作，也就注定只少数有财力、
- 根据google最新的算法规则:用户行为模式的重视程度越来越高，这也就要求网页设计的时候应注意“合理的网页结构”，SEO业界也有个共识“网页
