Px、em、rem区别介绍

一、PX

px像素（Pixel），相对长度单位（W3C官网中对于像素定义时决定的）。像素px是相对于显示器屏幕分辨率而言的。

假入你的显示器尺寸是：1000cm * 500cm，现在你设置的分辨率是1000 * 500，那么一个像素的大小应该是1cm * 1cm，如果这个时候你把你的显示器分辨率设置为：500 * 250了，那么一个像素的大小就是2cm * 2cm了，所以一个像素的大小是跟你的屏幕分辨率是有关的，所以是一个相对单位。

1.1 PX特点

1.px是固定的像素，一旦设置了就无法因为适应页面大小而改变。IE无法调整那些使用px作为单位的字体大小；
2.国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3.Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

二、EM

em是相对长度单位。 子元素字体大小的em是相对于父元素字体大小
若往上查找所有父元素的字体尺寸都未被人为设置，则相对于浏览器的默认字体尺寸。即1em=16px
元素本身的width/height/padding/margin用em的话是相对于该元素的font-size

上代码：

<!--html start-->
<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>
<!--html end-->
<!--css start-->
div {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}
p {
  font-size: 0.5em; /* 20px */ 
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;
}
span {
  font-size: 0.5em;  
  width: 10em;
  height: 10em;
  border: solid 1px blue;
  display: block;
}
<!--css end-->

延展测验：你能说出孙元素span的font-size和width吗？
我猜你会说10px、100px。逻辑上是正确的。
但是如果你是chrome浏览器。我不得不告诉你应该是12px、120px。

• 因为chrome设置的最小字体大小为12px，意思就是说低于12px的字体大小会被默认为12px，当然这一尬境可以由css3解决，具体看本文的第五点补充知识。
• chrome默认的字体大小是12px，也就是1em默认为12px，如果最外层的父元素直接把font-size设为1.5em，那么该元素的字体大小为18px（12*1.5）。

2.1 EM特点

1.em的值并不是固定的
2.em会继承父级元素的字体大小
注意：

• 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px 那么12px=0.75em,10px=0.625em
• 为简化font-size的换算，需在css中的body选择器声明font-size=62.5%
• 浏览器默认的字体大小为16px,这样的话16px=100%,那么1px=6.25%,10px=62.5%,因此如果我们在body里面定义font-size:62.5%,则浏览器默认的字体大小就是10px,使em值变为
  16px*62.5%=10px。这样12px=1.2em, 10px=1em
• 所以我们在写CSS的时候，需要注意两点：
  （1）body选择器中声明font-size=62.5%；将你的原来的px数值除以10，然后换上em作为单位；
  （2）重新计算那些被放大的字体的em数值,避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44的现象。若在#content中声明了字体大小为1.2em，那在声明p的字体大小时就只能是1em，而不是1.2em。因此em非彼em，它继承#content的字体高而变为了1em=12px。

三、 REM

rem是CSS3新增的一个相对单位（root
em，根em），rem是全部的长度都相对于根元素HTML。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

<!--html代码结构和上面的EM举例一样，这里只展示css-->
html {
    font-size: 10px;
    }
div {
    font-size: 4rem; /* 40px */
    width: 30rem;  /* 300px */
    height: 30rem;
    border: solid 1px black;
}
p {
    font-size: 2rem; /* 20px */
    width: 15rem;
    height: 15rem;
    border: solid 1px red;
}
span {
    font-size: 1.5rem;
    width: 10rem;
    height: 10rem;
    border: solid 1px blue;
    display: block;
} 

3.1 这个单位与em有什么区别呢？

• 使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素
• 这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。（优点）
• 目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，就多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
  例： p {font-size:14px; font-size:.875rem;}

注意

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

四、 px 与em、rem 的选择？

px： 对于元素的边框、定位或者只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可
em/rem： 适配各种移动设备（iPhone和iPad等分辨率差别比较大的设备）、响应式页面。 不过我更倾向于rem，因为em不同元素的参照物不一样（都是该元素父元素），在计算时不方便，rem就只有一个参照物（html元素），计算起来更清晰。

五、补充知识

chrome谷歌默认最小字体12px,即低于12px的字体大小会被默认为12px。
如果要将字体大小设置为10px，解决方案如下:

/*css的缩放功能*/
span {     
	font-size: 10px;     
	-webkit-transform-origin-x:0;		//固定元素的位置，在x轴的0处     
	-webkit-transform: scale(0.84);		//按照0.84比例缩放文字 
}