网页设计中怎么将px换成em
作者:Tony 来源:懒得设计 发布时间:2008-04-16 13:50:00
在这系列视觉设计的文章间隙插一篇字体单位的文章。
前文说了,字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。
我在调整本blog的时候,发现不仅仅是字体,将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。
怎么将px换成em呢?特地转jorux06年12月的一篇文章,因为中文站用px的太多了,如果你是对代码不敏感的纯设计师,可以向技术人员或者页面制作人员请教:
em是何物?
em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
重写步骤:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级 元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
诡异的12px汉字(原因待查)
本人在完成em转换时还发现了一个诡异的现象,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而 是稍大一点。这个问题我已经解决,你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有 限。阅读本篇的读者还有其他解释吗?
本现象只发生在12px的汉字,英文不存在此现象。
你可以在这里下载到此表现此现象的文件。(1KB)
下载后请读者用IE打开sample.htm, 可以看到第一段文字明显长于第二段。然后你可以用编辑器打开style.css,看看究竟发生了什么。解决方法就是把style.css中的62.5%换为63%。
还可以做哪些改进
为什么还需改进:
1. 你的网站css过于复杂,以至于不知道元素的从属关系,很难重写css;
2. 绝大部分人看了本文之后仍然不会重写css;
3. 很大部分人不知道浏览器可以调整页面的字体大小。
所以你需要一个诸如本站信息框中的字体大小调整控件。
相信本站读者的英语能力,这里就不再罗嗦了,请参看:The Text Changer
Important reference:
1. How to size text using ems
2. The Text Changer
猜你喜欢
- 今天一个域名查询系统出现故障,该系统是用的ASP调用XMLHTTP获取whois库的数据,具体错误如下: msxml3.dll 错
- MySQL Innodb 引擎优化,InnoDB给MySQL提供了具有提交,回滚和崩溃恢复能力的事务安全(ACID兼容)存储引擎。InnoD
- 在SQL Server 中,如果给表的一个字段设置了默认值,就会在系统表sysobjects中生成一个默认约束。如果想删除这个设置了默认值的
- 使用access数据库时可能用到的数据转换:类型转换涵数:函数 返回类型 expression 参数范围CBool Boolean 任何有效
- 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是
- 因为要做移动梦网WAP的一些接口,所以要用到这种方式,接下来会有ASP.net版本的,这个是ASP版本的,利用了MSXML2.XMLHTTP
- 摘要:Oracle和微软都是数据库方面的大厂商,采用两家的产品的企业也不少。今天这篇文章为大家对比Oracle和SQLServer的镜像。标
- 首先,建立一个Conn的连接对象,然后连接到数据库data.mdb中,取得连接句柄后,把它保存在session("conn&quo
- 在我们写样式的时候,页面的CSS在经历几个版本的修改之后,可能有些样式已经用不到了,或许将某些样式更名了而原来的忘了删除,总之页面中可能存在
- 在数据库应用的设计中,我们往往会需要获取某些表的记录总数,用于判断表的记录总数是否过大,是否需要备份数据等。我们通常的做法是:select
- 是不是很烦每次注册网站或填写相关资料时都要重来一遍?其实会有很多自动填写工具能代劳。比如使用 Mac, 在 Safari 的表单中,它可以足
- XmlDocume
- 如果使用注释的方法得当的话,为你的CSS文件添加注释可以在开发过程中给予你和其他人很大的帮助。最常见的是为CSS样式规则添加提示信息,不过使
- 上次在“给网页添加打印按钮”一文中,有一段代码是“复制本文链接到剪贴板”js脚本,很可惜只能在IE中使用。这次在“淘宝网在线充值中心 - 荆
- 突然有个想法,不知道是不是首创:用"表情符号"做植入广告. 目前的表情符号 "黄色小圆脸"系列可以说
- 这段时间服务器崩溃2次,一直没有找到原因,今天看到论坛发出的错误信息邮件,想起可能是MySQL的默认连接数引起的问题,一查果然,老天,默认
- 有。试试下面这个程序:saveip.asp<%Server.Scripttimeout = 1000On 
- Function Comma(str)If Not(IsNumeric(str)) Or 
- 如何搭建完整的网站架构并设计出一个出色的网站?关于这个问题,我们很难提出一个绝对权威和正确的设计思路,但任何网站的设计都需要遵循一个循序渐进
- asp之家注:学习asp网页编程的朋友一定用过ACCESS数据库,access的简单方便,大大降低了asp初学者学习asp的门槛,对于学习a