Page 42 - css揭秘

相信你的眼睛，而不是数字

人的眼睛并不是一台完美的输入设备。有时候精准的尺度看起来并不精
准，而我们的设计需要顺应这种偏差。举一个在视觉设计领域广为人知的例
子吧，我们的眼睛在看到一个完美垂直居中的物体时，会感觉它并不居中。
实际上，我们应该把这个物体从几何学的中心点再稍微向上挪一点，才能取
得理想的视觉效果。来亲身体验一下这件怪事吧（参见图 1-9）。
与此类似，在字体设计领域广为人知的是，圆形的字形（比如 0）与矩
形字形相比，需要稍微放大一些，因为我们倾向于把圆形感知得比其实际尺
寸更小一些。你也可以在图 1-10 中体验一下。 图 1-9
在第一个矩形中，棕色方块在数
这些视觉上的错觉在任何形式的视觉设计中都普遍存在，需要我们有针 学层面上是完美垂直居中的，但
对性地进行调整。一个非常常见的例子是给一个文本容器设置内边距。不论 看起来并不是这样；在第二个矩
形中，方块从几何中心向上轻微
内容文本有多长，是一个单词还是几个段落，这个问题都会出现。假如我们
移动了一点儿，但它在人类的眼
给容器的四边指定相同的内边距，则实际效果看起来并不相等，就像图 1-11 睛看来却是恰好居中的
显示的那样。原因在于，字母的形状在两端都比较整齐，而顶部和底部则往
往参差不齐，从而导致你的眼睛把这些参差不齐的空缺部分感知为多出来的
内边距。因此，如果我们希望四边的内边距看起来是基本一致的，就需要减
少顶部和底部的内边距。你可以在图 1-12 中看出这种差异。

关于响应式网页设计 图 1-10

圆形看起来要小一些，但实际上它
响应式网页设计（Responsive Web Design，RWD）在最近几年风靡一 占据的宽高和方形是完全一样的
时。但是，人们大多只是在不停念叨网页的“响应式”是多么重要，而极少
有人去深入探讨怎样才能做好响应式设计。
比较常见的实践是用多种分辨率来测试一个网站，然后添加越来越多的
媒体查询（Media Query）规则来修补网站在这些分辨率下出现的问题。然
而对于今后的 CSS 改动来说，每个媒体查询都会增加成本，而这种成本是
不应轻易上升的。未来每次对 CSS 代码的修改都要求我们逐一核对这些媒
体查询是否需要配合修改，甚至可能要求我们反过来修改这些媒体查询的设
置。这一点常常被我们忽略，后患无穷。你添加的媒体查询越多，你的 CSS
代码就会变得越来越经不起折腾。
这并不是说媒体查询是一种不良实践。只要用对了，它就是利器。但
是，你只应该把它作为最后的手段。比如你想把网站做得弹性灵活，但其他
尝试全都失败了；或者我们希望在较大或较小的视口下完全改变网站的设计
形态（譬如，把侧栏改成水平布局）。我这么说的原因在于，媒体查询不能
以一种连续的方式来修复问题。它们的工作原理基于某几个特定的阶梯（亦
图 1-11
称“断点”），如果大部分样式代码并不是以弹性的方式来编写的，那么媒体
为容器的四边指定了相同的内边
查询能做的只是修补某个特定分辨率下的特定问题——这本质上只是把灰尘
距（这里用了 .5em），但实际看
扫到地毯下面而已。 起来上下空得多，左右空得少

CSS 编码技巧 11

඀ࠡ JOEC