关于前端:px-emrem的区别

px，em，rem区别

PX

px像素（Pixel）。绝对长度单位。像素px是绝对于显示器屏幕分辨率而言的。

px特点
- IE无奈调整那些应用px作为单位的字体大小；
- 国外的大部分网站可能调整的起因在于其应用了em或rem作为字体单位；
- Firefox可能调整px和em，rem，然而96%以上的中国网民应用IE浏览器(或内核)。

EM

em是绝对长度单位。绝对于以后对象内文本的字体尺寸。如以后对行内文本的字体尺寸未被人为设置，则绝对于浏览器的默认字体尺寸。

EM特点
- 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作为单位就行了。
所以在写CSS时，须要留神：
- body选择器中申明Font-size=62.5%；
- 将你的原来的px数值除以10，而后换上em作为单位
- 从新计算那些被放大的字体的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根元素。
这个单位堪称集绝对大小和相对大小的长处于一身，通过它既能够做到只批改根元素就成比例地调整所有字体大小，又能够防止字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已反对rem。
对于不反对它的浏览器，应答办法也很简略，就是多写一个相对单位的申明。这些浏览器会疏忽用rem设定的字体大小。上面就是一个例子：
```
p {font-size:14px; font-size:.875rem;}
```
在我的项目中计算rem的值，须要看根元素所设置的font-size的值是多少，依据该值，便很容易计算出须要的rem，或者px像素

在获取以后窗口的font-size能够应用getComputedStyle()进行获取

//语法： let style = window.getComputedStyle(element, [pseudoElt]);//element //用于获取计算款式的Element//pseudoElt 可选//指定一个要匹配的伪元素的字符串，必须对一般元素省略例子：let elem1 = document.getElementById("elemId");let style = window.getComputedStyle(elem1, null);// 它等价于// let style = document.defaultView.getComputedStyle(elem1, null);

在ie低版本中，应用currentStyle进行获取

//语法：obj.currentStyle.xxx//仅ie应用//兼容：return obj.currentStyle？obj.currentStyle.xxx:getComputedStyle(obj,null).xxx;

px，em，rem区别

PX

EM

REM