css中的px、em、rem 详解 (2)

完成 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设定的字体大小。
举例:

p {font-size:14px; font-size:.875rem;}

注意:
选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

3、字体换算表 字号 pt px em
初号   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  

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzpwwx.html