是时候不用考虑基于字体大小(em)的设计了
作者:秦歌 来源:随网之舞 发布时间:2009-10-24 13:25:00
今天是Firefox3的2008下载日(貌似北京时间是6.18的凌晨1:00),这就意味着Firefox3正式发布了。Firefox3有众多的改进和新功能,我最关注的功能之一是“全页面缩放(Full page zoom)”。这就意味着Firefox3和Opera以及IE7+都可以让用户“完全控制显示内容的大小同时自动调整页面布局和结构”,说白了就是可以让整个页面直接放大或缩小却不会乱掉。这就意味着我们不用再考虑为了可访问性而整个页面是基于字体大小(em)的设计了。
在CSS中,有两种单位。一种是绝对长度单位,包括英寸(in)、厘米(cm)、毫米(mm)、点(pt)和派卡(pc)。另一种是相对长度单位,包括em、ex和像素(px)。ex由于在实际应用中需要获取x大小,因浏览器对此处理方式非常粗糙而被抛弃(更多内容可以参考Eric A. Meyer的《CSS权威指南》),所以现在的网页设计中对大小距离的控制使用的单位是em和px(当然还有百分数值,但它必须是相对于另外一个值的)。
在css中,1个“em”定义为一种给定字体的font-size值。所以1em可能随元素的不同而不同,它会相对于父元素字体大小而改变。在常见浏览器下,默认字体的大小为16px。常见有两种方法来进行网页设计:
设置默认字体大小为10px:
body{font-size:62.5%;}#wrapper{width:97.4em;}
这便于依次计算出其他元素的长宽值,比如某个容器#wrapper的宽度是974px,CSS中定义为97.4em。本站随网之舞就是依据这种方式来实现的。
设计默认字体大小为网页中最常用字体的大小,比如最常用字体的大小是12px:
body{font-size:75%;}#wrapper{width:81.1667em;}
这样虽然省去了设置默认字体的大小,但是偶尔却为严格尺寸设计带来麻烦,比如你要设置那个宽为974px的容器#wrapper就会遇到此类麻烦。其实第一种方法也会遇到类似麻烦,只不过比第二种少些。
基于字体大小的设计好处很明显,当用户调整浏览器默认字体的大小时,字体和页面会随之缩放,能够满足挺这种方法的人常说的一个优点就是弱视的人可以通过放大字体来看清楚页面内容,增强了页面的可访问性。
每个屏幕都有分辨率,比如1280×1024分辨率时屏幕就有1280×1024个点,这每个点就是一个像素(px)。所以利用px来设计网页,不存在em那种相对于父元素字体大小变化而变化的问题。而实际上绝大部分的站点设计都是基于px设计的。在Windows平台下IE7之前都无法通过调整浏览器中的“字体大小”来调整文本大小,非IE浏览器可以,但实际上是一般基于px的页面,一旦仅仅调整了文本大小页面就会乱掉(在Firefox 2下观看除中国雅虎外的门户网站,调整一下字体大小就了解了)。
为了IE下不能调整以px为单位的字体大小,而非IE下可以的问题,YUI CSS Tools采用了如下代码来设置默认1em的大小,支持用户的字体大小调整:
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
为此IE默认情况下,1em的大小是13.3333px,所以你会看到YUI CSS Grids里面那些诸如width:73.076em;
这样的值。
所以,基于字体大小(em)的设计和基于px的设计相比而言:
基于字体大小(em)的设计页面带来的缩放效果有限,最早基于字体大小设计的门户网站应该就是Yahoo和MSN了,而实际上它们也仅仅是保证了上下缩放 * 而已,再多就乱掉了。
现在的站点越来越多的图文混排,图像的高度和宽度本身就是像素数。除非你通过CSS来把图片的大小设置为相应的em值,就像本站的Logo这样,否则图片是不会随着文字变化而变化的。但是如果采用的是背景图片,那就基本上无计可施了。所以实际上基于字体大小来做图文混排设计的网页需要对图像的设计是有相当严格的要求的,即使如此仍无法完美解决,但复杂度却上升不少。
基于字体大小的网页设计,将使长度变得的非常的不直观,导致设置一个宽度变得非常麻烦,YUI CSS Grids中说明了这点。并且由于em会相对于父元素字体大小变化而变化的问题,导致图文混排的复杂设计时非常麻烦。特别是在盛行过度设计和精确到像素的这个浮躁时代。其实连Google和百度这种非常简单的首页都或多或少的利用px来布局。
现在主流浏览器都支持了“全网页缩放”功能,Safari尚未支持这个功能(Google的新推出的Chrome和Safari的基于同一个核心,很遗憾也不支持这个功能),而是像Firefox2一样支持文本缩放,但是具有讽刺意味的是Apple页面基本上都是基于px的,所以一缩放就乱掉,我深信Safari支持这个功能仅仅是时间问题(Safari和Chrome共同核心引擎Webkit已经有计划了)Chrome2和Safari4都已经支持这个功能。两年前有篇《95%的中国网站需要重写CSS》很流行,虽然保证用户的可访问性是应该的,但是应该找到其最佳实现的方法,毫无疑问浏览器的“全页面缩放”功能是最佳选择。从现在开始,基于px的设计不用再过于背负违背可用性的恶名了,基于em(文字大小)的设计不能给我们带来太多的好处,反而有可能耗费太多的精力挣扎于如何精确保护视觉设计上,设计师的精力应该更多的放在内容的理解、快速呈现、语义化、对屏幕阅读器的支持等等方面上。
全球范围内IE6已经不到40%了,中国用户比率应该高些,但趋势是一样的,毕竟IE8都出Beta了,IE6会很快成为历史的。如果你是偏执狂,需要考虑Firefox2和Safari的话,或许设置body{font-size:10px;}
再基于em进行设计是一个不错的办法,中国雅虎的首页就是利用类似原理。总之,是时候不用考虑基于字体大小(em)的设计了,特别是针对IE6的解决方案。
猜你喜欢
- 一、 在数据库排序查询优化上的差异。在讲解这个内容之前,为了读者能够清楚我讲的内容,我要先谈一个概念。命中率,它是指从内存中取得数据而不从磁
- SQL Server数据库的六个实用技巧:(一)挂起操作在安装Sql或sp补丁的时候系统提示之前有挂起的安装操作,要求重启,这里往往重启无用
- 只有mdf文件的数据库附加失败的修复 附加时报如下错误: 服务器: 消息 1813,级别 16,状态 2,行 1 未能打开新数据库 '
- 内容摘要: 网页的色彩搭配往往是网友们感到头疼的问题,尤其是那些完全没有美术基础的网友。到底用
- 1、使用索引来更快地遍历表。缺省情况下建立的索引是非群集索引,但有时它并不是最佳的。在非群集索引下,数据在物理上随机存放在数据页上。合理的索
- IIS上设置301 跳转相信大家都会,只要在网站-属性-主目录里 选择重定向URL就行了,这样整站就跳转到目标站点了,但是有个问
- 以下为在asp中增加一个sql server2000用户函数,并为建立一个数据库,给他dbo的权限。注意:sql server的验证方式不要
- 我其实是同一天看到Robert Treat几人整理的”Mysql 迁移到Oracle前需要了解的50件事“与Baron Schwartz的”
- ASP实例代码,利用SQL语句动态创建Access表。留作参考,对在线升级数据库有用处.<% nowtime = now()
- innerHTML,outerHTML innerHTML检索或设置标签内的内容;outerHTML检索或设置整个标签的内容(包含标签)。&
- 导语:目前点评“2008年10佳改版网站”也许为时尚早,但2008年毕竟已经过去了9个多月,周四又同时有Twitter和FriendFeed
- 听说 FaceBook 开放其网站的代码了,期前也算是了解过 FaceBook 的架构,所以重点就是看其代码的质量。可以毫不夸张的说,Fac
- <% SoFia_DbName="jiaoyou&qu
- SQL> show all --查看所有68个系统变量值 SQL> show user --显示当前连接用户 SQL> s
- 使用ENUM代替字符串类型有时候, 可以通过使用ENUM来代理常规的字符串类型。一个ENUM列能够存储65535个不同的字符串值,MySQL
- 把程序放到一个文件中,然后包含再call就可以了。(JMAIL4.3)<%'警告函数sub w_msg(messag
- 今天在看框架的时候无意间看到了document.compatMode,经过一番资料查找,终于搞懂了。文档模式在开发中貌似很少用到,最常见的是
- 这些小东西是我在网上看到的就把它记下来了,可能以后会有用的: &nbs
- 随着网页制作热潮的兴起,Dreamweaver 4.0强大的功能深受众多网页制作者的喜爱。特别是Dreamweaver 4.0中有许多第三方
- 一、简化代码采用更为简短的写法,不仅可以减少输入的字符数,还可以减少文件大小。大部分采用简单写法的代码,执行效率都有轻微提高。1.1&nbs