css中px,em,rem的区别

发表于 更新于 分类于 阅读次数：

PX

px是绝对单位。

px是pixel的缩写，也就是像素，是实际的显示设备（显示器、手机屏幕）上的一个物理像素点，它的大小和实际的显示用的物理设备有直接关系，也就是设备依赖的。

EM

em是相对单位。

  • em是相对于元素自己的字体大小font-size而言的。
  • 如果元素自己的font-size用em来表示的话，则是相对于父元素的font-size。
  • 如果元素自己的font-size没有设置，则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体大小font-size都是16px，也就是说：1em = 16px, 2px = 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作为单位就行了。

REM

rem是CSS3中新增的一个相对单位（root em，根em），这个单位引起了广泛关注。

这个单位与em有什么区别呢？
区别在于使用rem为元素设定font-size时，仍然是相对大小，但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
下面是一个例子：

1
2
3
4
p {
    font-size:14px; 
    font-size:.875rem;
}

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