完成 em转换时还发现了一个诡异的现象,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而 是稍大一点。你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有 限。本现象只发生在12px的汉字,英文不存在此现象。解决方法就是把style.css中的62.5%换 为63%。
一个px、em、pt单位转换工具:地址:
2、rem特点rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
举例:
注意:
选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
初号 42pt 56px 3.5em
小初 36pt 48px 3em
34pt 45px 2.75em
32pt 42px 2.55em
30pt 40px 2.45em
29pt 38px 2.35em
28pt 37px 2.3em
27pt 36px 2.25em
一号 26pt 35px 2.2em
25pt 34px 2.125em
小一 24pt 32px 2em
二号 22pt 29px 1.8em
20pt 26px 1.6em
小二 18pt 24px 1.5em
17pt 23px 1.45em
三号 16pt 22px 1.4em
小三 15pt 21px 1.3em
14.5pt 20px 1.25em
四号 14pt 19px 1.2em
13.5pt 18px 1.125em
13pt 17px 1.05em
小四 12pt 16px 1em
11pt 15px 0.95em
五号 10.5pt 14px 0.875em
10pt 13px 0.8em
小五 9pt 12px 0.75em
8pt 11px 0.7em
六号 7.5pt 10px 0.625em
7pt 9px 0.55em
小六 6.5pt 8px 0.5em
七号 5.5pt 7px 0.4375em
八号 5pt 6px 0.375em