web Framework

Page 14

高度方向上是有可能严格栅格化的。一切皆有可能! 然而,现实总那么残酷

(图 5) 上图中的标题高度为 22, 这在 24 列 960 栅格系统中是无法对齐的。而且总高度 为 100, 在 24 列 960 栅格系统中也不存在(110 才可以)。或许高度方向上我们 可以细化行宽为 20, 但依旧没法解决上面两个问题(22 是明显不能解决的,而 对于 100px 的高度,也无法通过细化行宽来解决。可选高度永远是 10 的奇数倍, 如果进一步细化,小于 10 后,会变得非常繁琐,没什么实际应用价值) 宽度世界里会好些吗

(图 6) 上面是 Yahoo!首页上的两个小模块,我都不想去标注模块里面的布局宽度了 (因为一点都不符合 24 列 960 栅格系统)。宽度世界里,和高度世界一样充满 希望但现实却残酷无比。 银弹是不存在的 栅格系统是美好的。但如果我们一味地追求将所有设计都栅格化(必须承认我曾 有这个幻想),则立刻会陷入地狱一般的黑暗中。这篇文章中的艰难尝试(我分 析了 20 多个小模块),让我突然醒悟到一个粒度问题:任何设计都有适用范围, 超出最佳适用范围,强行使用只会带来无尽的烦恼。对于栅格系统(这里指所有 栅格系统,包括多种栅格系统混合使用的情景)来说,我觉得以下场景非常适 合: 1. 页面的总体宽度布局,比如两栏、三栏等布局 2. 一些固定区块的尺寸,比如广告图片的尺寸 3. 区块之间的间距,可以参考栅格系统的槽宽(Gutter)


Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.