CSS样式中的字体大小单位：px/em/rem应用介绍

本文介绍下CSS中的字体大小font-size的单位：px/em/rem/%。

1.px:Pixels 像素

像素是屏幕的最小单位，是个绝对单位，是个可以精确确定位置和字体大小的单位，看起来是个不错的方案，但在CSS中以px为字体单位存在一个问 题，：在Ctrl+滚动鼠标中轮（或者键盘上的+或者-）缩放页面的时候，遇到麻烦，简单的说，对视口比较小的移动浏览器不友好。所以，尽量避免用px作 为font-size的单位吧，至少从现在开始。

2.em：element

em是个相对单位，基本上所有浏览器的基准字体大小是16px，这时候，1em=16px;如果想设置字体大小是14px，那么，14/16=0.875，也就是0.875em,下面是一张常用的对比表：

为了减少计算的麻烦，我们可以在CSS中为页面的根节点定义：

html {
  font-size: 62.5%; /* 16/10=0.625 */
}

因为苹果的Safari浏览器会凑整数，所以，如果你愿意，可以直接写上63%。

做了上述定以后，现在是1em=10px了，这样算就简单多了。可是还是有问题！这一段的前面已经说了，em是个相对单位，糟糕的是，它相对的是它的父节点，也就是说，在整个HTML页面内，1em的大小很可能是不同大小的，这是很麻烦的！

没有关系，CSS3引入了一个rem单位,更好的消息是Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+ 等主流的浏览器版本都支持了这个单位了！只是可怜的IE6-8悲剧了！

3.rem（root-em）

1em大小的计算是基于父级节点的，在实际使用中很麻烦，rem几乎是彻底解决了这个问题！

html{font-size:62.5%; /* 10÷16=62.5% */}
body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */}
p{font-size:14px;font-size:1.4rem;}

 

还写px是为了兼容那些还不理解rem单位的浏览器，优雅降级，px单位写在前面的原因你懂的！

 4.%，没错，还有个百分比

1em = 12pt = 16px = 100%

对然没什么问题，但是，太麻烦了，我想没人会自找那么麻烦的事儿！