em,rem,px,rpx的区别与使用_px rpx em rem的区别

一、概念

px像素（Pixel）:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 px特点
1.IE无法调整那些使用px作为单位的字体大小；
2.国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3.Firefox能够调整px和em，rem，但是有很多人使用IE浏览器(或内核)。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em特点
1.em的值并不是固定的；
2.em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么0.625em=10px。为了简化font-size的换算，在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样1em=10px, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

body {
  font-size: 62.5%;
}
.banner {
  width: 30em;
}
1
2
3
4
5
6

rem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。由于设计稿使用的屏幕宽度为750，所以此时rem与设计稿上px的换算关系为 1rem = 100px

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
rpx 为小程序中使用的相对单位，用法和rem类似， 1rpx = 屏幕宽度/750 px, 所以在屏幕宽度为750的设计稿中，1rpx = 1px。

二、代码理解

.em{
	width: 3em;
	height: 3em;
	background-color: blue;
}
.rem{
	width: 3rem;
	height: 3rem;
	background: green;
}
1
2
3
4
5
6
7
8
9
10

<div class="em">em</div>
<div class="rem">rem</div>
1
2

在第一个例子中，1rem和1em都是16px。rem是相对于根html 元素的，但为什么 rem和em的初始宽高都是16px呢？那是因为浏览器默认是 16px的字体大小，如果都不修改的话 rem和em都是继承来的。

rem是相对单位，相对于html根元素文本字体的大小，html根元素的获取方式：document.getElementsByTagName(‘html’)[0]
em是相对于父元素继承的字体大小，em虽然指的是当前元素的字体大小 但是当前元素的字体大小没有设置的话，就是继承它的父元素的字体大小

.em{
	font-size: 50px; /*1em=50px*/
	width: 3em;
	height: 3em;
	background-color: blue;
}
.rem{
	font-size: 50px;
	width: 3rem;
	height: 3rem;
	background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12

通过js代码修改浏览器字体大小，设置1rem=50px

document.getElementsByTagName('html')[0].style['font-size'] ='50px';
1

三、em继承实例

<div class="aaa">em</div>
1

.aaa{
	width: 3em;
	height: 3em;
	padding:1.5em;
	background-color: blue;
}
1
2
3
4
5
6

可见，div块的padding=24px(1.5X16)width=height=48px(3X16)
假设在div块外部包裹一个div块，并且设置它的font-size: 1.25em，观察最开始div块的padding。

.father{
	font-size: 1.25em;
	background-color: aqua;
}
.aaa{
	width: 3em;
	height: 3em;
	padding:1.5em;
	background-color: blue;
}
1
2
3
4
5
6
7
8
9
10

父级块的字体大小为20px(1.25X16),子块的padding=30px(1.5X20)
在基础之上，使得继承更复杂，在子块css代码中加入

.aaa{
font-size: 1.2em;
}
1
2
3

观察到，子级继承父级的20px 字体大小，然后乘以它自己的 1.2em 设置，得到1.2 × 20 = 24px 新字体大小。子级div上的padding（1.5em ） 再次改变大小，padding=36px，即 1.5 × 24 = 36 。
最后，如果我们显示地将子级的font-size设置为14px，此时

.aaa{
	/* font-size: 1.2em; */
	font-size: 14px;
	width: 3em;
	height: 3em;
	padding:1.5em;
	background-color: blue;
}
1
2
3
4
5
6
7
8

现在，padding=21px，即 1.5 x 14 = 21,它不受父元素的字体大小影响。

四、使用场景

rem的使用场景：一般移动端的UI设计稿的宽度分为640px,和750px两种,但是要想使用一份代码就适配所有屏幕，就必须使用相对单位，这时候使用rem是最好的选择。

使用方法：

我们将UI设计稿人为均分成几等份，使用媒体查询判断屏幕的大小，针对判断出的每一种屏幕大小，给其html根元素的字号大小设置为均分后的每一等份的大小。

如：UI设计稿宽度为640px,我们将UI设计稿均分为20等份,那么我们就可以通过媒体查询，给320px的屏幕设置HTML根元素的字号大小为16px（320/20）,给640px大小的屏幕设置html根元素字号大小为32px(640/20),则我们在后续书写代码的时候，ui设计稿上的一个div的盒子宽度为160px,我们使用rem单位将其表示为width：5rem,则此盒子无论在320px的屏幕下还是在640px的屏幕下都将显示为屏幕的四1/4的宽度。

简便方法：

我们在使用rem时，每一个元素的大小都将从设计稿的px转换为rem相对单位，非常麻烦。遇到不能整除的数值还会导致最后页面数值的不精确，在这种情况下我们，可以使用淘宝开发的flexible.js插件，配合开发工具vs code的cssrem插件，可避免做媒体查询与数值的转换。（前者避免媒体查询，后者避免做数值转换）