前端、UI设计师需要知道的px，em，rem，rpx单位
1、 px：设备屏幕的像素，浏览器的默认字体高都是 16px
em：相对于父元素的比例
（会继承父级元素的字体大小，代表倍数。继承的是计算公式，不是值）
rem：相对于根元素的比例
（始终是基于根元素 <html> ，代表倍数。继承的是计算公式，不是值）
① rem 要比 em 更好设置,
② 但是rem 不兼容低级浏览器，为了兼容不支持 rem 的浏览器
③ 需要在各个使用了 rem 地方前面写上对应的 px 值，这样不支持的浏览器 可以优雅降级。
④ 如果用户群都使用最新版的浏览器，那推荐使用 rem，
如果要考虑兼容性，那就使用 px，或者两者同时使用。
rpx： rpx是微信小程序推出的一个单位（更好适配手机端）
1、px 是最基本的尺寸，就是设备的像素。
通常我们说的电脑分辨率，就是像素的问题。
2、问题： 怎么让 Chrome支持小于12px 的文字
谷歌浏览器中，默认的中文汉字最小字体是12px，不管你设置成 8px 还是 10px，在浏览器中只会显示 12px（以前的问题，现在应该已经支持了，如果遇到这个问题可以这样解决）
```HTML
<style>
p span{
font-size:10px;
transform: scale(0.8);
-webkit-transform:scale(0.8);
}
</style>
<span> 10px</span>
```
1、em 的使用是相对于其父级的字体大小的，即倍数。浏览器的默认字体高都是 16px，未经调整的浏览器显示 1em = 16px。
①浏览器默认字体 16px = 1em = 100%(浏览器默认字体，关系不是很好转换)
假设我们父元素给的是 22px，子元素需要设置为 14px，
我们就需要 14/22=0.63636364em（关系不是很好计算）
② 浏览器会忽略小数 1.2em = 19.2px 实际上会是 19px 的效果
如果设置 1.2em 则变成 19.2px,问题是 px 表示大小时数值会忽略掉小数位的。
鉴于上面两个问题的存在，通常会人为地使 1em = 10px。也就是认为的去修改浏览器的默认值 16px = 1em = 100%，使得它成为 10px = 1em
2、问题：如何使得 160px = 1em = 100%
浏览器的默认值 16px = 1em = 100%，使得它成为 10px = 1em 。看这两个等式，我们就知道要使得 px 与 em 之间做改变，name就是借助 % 来作为桥梁。
使得 1em = 10px = 62.5%，就可以让 1em = 10px
```CSS
html，body {
font-size: 62.5%;
}
```
因为默认时字体 16px = 100%，则有 10px = 62.5%。所以首先在 html 中全局声明 font-size=62.5%=10px，
也就是定义了网页 body 默认字体大小为 10px，由于 em 有继承父级元素字体大小的特性，如果某元素的父级没有设定字体大小，那么它就继续了 body 默认字体大小 1em = 10px。
注意：继承的是公式，不是计算结果值
```CSS
html {
font-size: 62.5%; /* 使得 1em = 10px */
}
span {
font-size: 1.6em;
}
```
```HTML
<body>
<!-- 1em = 10px -->
<span>
<!-- 1.6em = 10px *1.6 = 16px -->
<span>
<!-- 1.6em = 16px * 1.6 = 25.6 = 25px 或者 26px （不同浏览器取舍小数不同）-->
</span>
</span>
</body>
```
结果：外层 `<span>` 为 html 字体 10px 的 1.6倍 = 16px，内层 `<span>` 为外层内容字体 16px 的 1.6倍 = 25px（或26px，不同浏览器取舍小数不同）。
明显地，内部 `<span>` 内的文字受到了父级 `<span>` 的影响。基于这点，在实际使用中给我们的计算带来了很大的不便。`因此 rem 的产生`
1、rem 的出现再也不用担心还要根据父级元素的 font-size 计算 em 值了，
因为它始终是基于根元素 `<html>` 的。每次都根据根元素 html 的值来计算就可以了，没有上面 em 每次都根据自己的父元素来慢慢计算，那样复杂的计算，
浏览器的默认值 16px = 1em = 100%，使得它成为 10px = 1em
```CSS
html {
font-size: 62.5%;
}
```
注意：继承的是公式，不是计算结果值
```CSS
html {
font-size: 62.5%; /* 使得 1em = 10px */
}
span {
font-size: 1.6rem;
font-size: 16px;
/* 由于 rem 并没有兼容所有的浏览器，如果是低级浏览器的话就不要用 rem 了吧，实在用了的话，
要加上 font-size: 16px; 也就是 px 的单位来兼容低版本的浏览器
例如 要想兼容 IE7 和 IE8，你还是需要使用 px 来做单位。*/
}
```
```HTML
<!-- rem 不管嵌套多少层，都是相对 html 的倍数 -->
<body>
<!-- 1em = 10px -->
<span>
<!-- 1.6rem = 10px *1.6 = 16px -->
<span>
<!-- 1.6rem = 10px *1.6 = 16px -->
</span>
</span>
</body>
```
结果：内外 <span> 的内容均为 16px。
2、注意： 有的时候只有 em 有效，rem 无效的！！！！！！！！！！！！！！
首行缩进与行高使用 em 有效。使用 rem 就是无效的。
```CSS
<style>
p {
text-indent: 2em;
line-height: 1.5em;
}
```
1、rpx 是微信小程序的尺寸单位，为了适应广大的前端开发者，微信小程序的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发小程序，微信开发者对 CSS 进行了扩充以及修改。
* 尺寸单位(也就是 rpx 单位的使用)
* 样式导入
rpx (responsive pixel)
可以根据屏幕宽度进行自适应。
规定手机屏幕宽为 750rpx。就是所有手机的屏幕宽度均为 750rpx 的大小。
具体的手机屏幕是多少 px ，要与 rpx 计算
如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素
```BASH
# 设备 rpx 换算 px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
# iPhone5 1rpx = 0.42px 1px = 2.34rpx
# iPhone6 1rpx = 0.5px 1px = 2rpx
# iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx
```
1、px：设备屏幕的像素，浏览器的默认字体高都是 16px
em：相对于父元素的比例
（会继承父级元素的字体大小，代表倍数。继承的是计算公式，不是值）
rem：相对于根元素的比例
（始终是基于根元素 <html> ，代表倍数。继承的是计算公式，不是值）
① rem 要比 em 更好设置,
② 但是rem 不兼容低级浏览器，为了兼容不支持 rem 的浏览器
③ 需要在各个使用了 rem 地方前面写上对应的 px 值，这样不支持的浏览器 可以优雅降级。
④ 如果用户群都使用最新版的浏览器，那推荐使用 rem，
如果要考虑兼容性，那就使用 px，或者两者同时使用。
rpx： rpx是微信小程序推出的一个单位（更好适配手机端）
rem 是 em 的升级，要用的话就选择 rem 了，不要再去选择 em。
但是 px 与 rem 怎么选择。rem 不兼容低级版本的浏览器，也看 UI 设计师怎么设计吧。用的多的还是 px。