66、px em rem rpx的区别

参考：px、em、rem、rpx 用法 与 区别_宁静致远-CSDN博客_rpx 

1、px em 和 rem的区别

三者的区别：

1. px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
2. em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
3. em是相对于其父元素来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，这样就意味着，只需要在根元素确定一个参考值。
4. rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx。

使用场景：

px：对于只需要适配少部分移动设备，且分辨率对页面影响不大的 。
rem：对于需要适配各种移动设备，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。
 

2、常用的布局单位

包括像素px，百分比%，em，rem，vw/vh。

（1）像素（px）：是页面布局的基础，是固定的像素，一旦设置了就无法因为适应页面大小而改变。一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：

CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

（2）百分比（%）：当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

（3）em和rem： 比px更具有灵活性，他们是相对的长度单位，其长度不是固定的，更适用于响应式布局。它们之间的区别：em相对于父元素，rem相对于根元素html。

（3.1）em： 

相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)；
这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。

（3.2）rem：

• rem的大小是根据html根目录下的字体大小进行计算的；
• 当我们改变根目录下的字体大小的时候，下面字体都改变，相当于html根元素的font-size的倍数；
• 利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。
• rem是CSS3新增的一个相对单位。

（4）vw/vh：是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

vw：相对于视窗的宽度，视窗宽度是100vw；
vh：相对于视窗的高度，视窗高度是100vh；
vmin：vw和vh中的较小值；
vmax：vw和vh中的较大值；

vw/vh 和百分比很类似，两者的区别：

百分比（%）：大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
vw/vm：相对于视窗的尺寸