要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用,就可以成为增强亲和力和易用性的一个自然选择,同时又无须做出设计上的牺牲。 像素是计算机屏幕上的不可缩放的点,而一个 em 就是一个字大小的方块。由于字体大小的变化, em 代表用户喜欢的文字大小的相对单位。 采用印刷式的固定设计方案或许要容易些,因为如果尺寸不变,则考虑的东西就相对较少。可是如果采用弹性的设计方法,就可以充分利用电脑的显示器和浏览器。 也许你想你的网站以某种特定的方式显示,但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性,从而对网站的成功造成损害。 为了理解弹性设计,我们必须首先来看看一个似乎与此无关的问题 - 指定文字大小的几种方式。 弹性文本 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人,但是有视力障碍 - 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小;拒绝提供这样的选择就剥夺了用户的主导权,很可能使用户无法舒适地阅读。 如果设计者使用像素为单位指定文字大小,大多数的用户将无法缩放文字,因为 Internet Explorer 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字,而Windows 下的IE却不能。 em 存在的问题 例如: body { font-size: 0.8em; } Jeffrey Zeldman过去曾经对此表示质疑,他认为尽管有其不利之处,以像素指定文字大小还是比用 em 好。这个结论是根据 Owen Briggs 所作的深入研究得出的。 Owen Briggs 测试了264种不同的文字缩放方法并演示了 em 之类的相对单位行不通。许多设计人员现在都用像素为单位指定文字大小,不是出于精确控制网页外观的需要,而是似乎没有更为合理的其他选择。 如此看来,要么是难看的大字体,要么无法缩放,好像无法两全。别着急,接着读下去。 另一种“大字体”后备样式 这种方法固然不错,但是如果和相对文字大小的措施(比如Wired News所提到的)一起使用,效果会更好。不能指望用户熟悉你的特有界面,用户一般对浏览器的界面更为熟悉,如果他们想看大一点的字体,更倾向于用浏览器来达到而不是用你的界面。而且他们更期望这种方法在各个网站都管用,不想每访问一个网站都改变一次。,比如Wired News CSS 关键词 在 ALA 的其他地方对关键字有更详尽的解说,这种方法的最好的示例也许就是你正在阅读的这篇文章。(在最近一次的改版之前,ALA 使用了后备的“大字体”样式切换,一个样式表使用像素指定文字大小,另一个用的是基于关键字的相对大小方法。) 百分比使得 em 可行 例如: body { font-size: 80%; } 弹性布局 让布局具有弹性,使之随着用户改变文字大小时自动适应,这好像有些多余甚至毫无必要。但是既然你让文字可以伸缩,那么让包容文字的布局也随之伸缩也是顺理成章的事。 另外,如果用户选择了较大的字体,则周围的空间应当会随之按比例增加,保持了“设计者”选择的比例,使文章容易阅读。 这种方案的另一个好处是可以避免不希望的文字换行。如果一个窄的栏目宽度以像素来定义,当其中的文字变大时,可能会打乱整个布局。采用文字大小比例来指定栏目宽度就可避免这个问题。 关于该方案的一个例子请看 CSS Zen Garden 上的作品 Elastic Lawn。 太宽了! CSS 对这个问题的解决方案是 max-width 属性,它可以指定某个元素的最大宽度。不幸的是 Internet Explorer 不支持(不知有谁想过没有?)。 另一个解决方案就是采用流动式布局,也就是说根本不指定内容区域的宽度,让文字自然流动,充满屏幕宽度(HTML Dog采用了这种方案)。许多人不接受这种方案,因为在宽屏幕下的可读性不好,但对于移动设备这样的小屏幕非常合适。 如果你准备采用弹性布局方案,在指定边界或者位图之类的由像素构成的对象时,仍然要以像素为单位,这可能会和基于文字大小关系发生冲突;但这不应成为不采用弹性布局的理由。 使图形弹性化 通过更换背景图片可以就可做到。这里是一个标题元素的例子,你也可以采用其他的图片替换技术: h1 { font-size: 1em; width: 10em; height: 100px; text-indent: -1234em; background-image: url(whatever.jpg); } div { width: 10em; overflow: hidden; } 讨论 Patrick Griffiths 是一位伦敦的自由Web设计师,爱好抒情音乐、改进和漫游他的网站宠物,HTML Dog。他有时更喜欢用 PTG 的昵称,这要看他当时的心境。 |