CSS 单位 px rem em

单位转换工具

点我

px

px是一个虚拟长度单位，是计算机系统的数字化图像长度单位，若是px要换算成物理长度，须要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时通常都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。

特色

1. IE没法调整那些使用px做为单位的字体大小（缩放）
2. 国外的大部分网站可以调整的缘由在于其使用了em或rem做为字体单位
3. Firefox可以调整px和em，rem，可是96%以上的中国网民使用IE浏览器(或内核)

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做为单位就好了。

特色

1em指的是一个字体的大小，它会继承父级元素的字体大小，因此不是一个固定的值。任何浏览器的默认字体大小都是16px。因此12px = 0.75em。实际应用中为了方便换算，一般会以下设置样式：

body {
  font-size: 62.5%;
}

这样，1em = 10px。经常使用的1.2em上就是12px。

在中文文章的格式中，每一个段落开头都要空出2格，若是用px作单位，对于12px的字体则须要24px，以此类推，可是对于em来讲就相对简单了。

p {
  text-indent: 2em;
}

注意点

• 标签嵌套字体增大

em是想对父元素的font-size属性来决定字高的。那么在多级嵌套下就会出现1.2em * 1.2em = 1.44em的问题出现。如：

<style>
  body { font-size: 62.5%; }
  .container { font-size: 1.2em; }
  .container p { font-size: 1.2em; }
</style>

<div class="container">
  我是文字1
  <p>我是文字2</p>
</div>

在上述例子中'我是文字2'会比'我是文字1'大，由于p的font-size属性是基于1em = 12px的字高去计算自身内部的em值：

/* 1em = 16px -> 计算后 1em = 10px */
body { font-size: 62.5%; }

/* 1em = 10px -> 计算后 1em = 12px */
/* 在container中的字体 都会为12px */
.container { font-size: 1.2em; }

/* 1em = 12px -> 计算后 1em = 14.4px */
/* 在p中的字体 都会为14.4px */
.container p { font-size: 1.2em; }

因此若是想在p中使用一样大小的字，不能设置为1.2em，只能设置为1em。

• IE中12px的汉字偏大

12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。你只需在body选择器中把62.5%换成63%就能正常显示了。缘由多是IE处理汉字时，对于浮点的取值精确度有限。

该象只发生在12px的汉字，英文不存在此现象。

body {
  font-size: 63%;
}

rem

rem是CSS3新增的一个相对单位（root em，根em）。这个单位与em的区别在于使用rem相对的是HTML根元素。只要根元素不修改font-size属性，那么rem的想对大小不会变，而em是相对父元素的font-size设置想对大小。

能够避免em字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，全部浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

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

优势

不会出现像em那样1.2em * 1.2em = 1.44em的状况出现，由于rem是相对html的font-size设置，而em是相对父元素的font-size

<style>
  html { font-size: 62.5%; }
  .container { font-size: 1.2rem; }
  .container p { font-size: 1.2rem; }
</style>

<div class="container">
  <!-- '我是文字1'和'我是文字2'是同样大的 -->
  我是文字1
  <p>我是文字2</p>
</div>

必须设置html的css样式，不然会按照默认的1rem = 16px。

缺点

CSS3新增的特性，因此只有支持C3的浏览器才兼容。解决方法低版本浏览器使用px，高版本使用rem。