rem 和px、em的区别 ？

先说一下几个的特性

一、px:

是显示屏上显示的每一个小点，为显示的最小单位，这个长度与你看到的显示屏中的文字屏幕像素没有任何关系。
1、px 像素值是固定的，不会随着屏幕宽度变而改变

二、em:

是相对单位。相对于当前对象内文本的字体尺寸， 如果当前行内文本的字体尺寸没有被设置过，那则相对于浏览器的默认尺寸，默认是 16px。
1、em 的值并不是固定的。
2、em 会继承父级元素的字体大小。
因为浏览器的默认字体大小是 16px 。所有未经调整的浏览器都符合: 1em = 16px, 12 px = 0.75em 为了简化计算，需要在 body 选择器中声明 font-size = 62.5%, 那么 16 * 62.5% = 10px, 这样 12px = 1.2em。也就是将原来的 px 数值除以10，然后换上 em 为单位就可以了。

三、rem:

它的全称是 font size of the root element （根元素的字体大小），rem 是 CSS3 新增的一个相对单位 ，像 em，但是它总是相对于 “根”元素即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。
浏览器的默认字体？
浏览器的默认的font-size是16px，1rem默认就等于16px。（chrome最小字体为12px）
rem可以做什么及它的应用场景？
用来做web app的屏幕适配，因为不同手机型号的屏幕大小都不同，所以这时候我们就不能用px来做单位，rem是适配不同手机屏幕的一种方案。

em 和 rem 的区别: em 相对于使用他们的元素的字体大小，rem 相对于根元素。
rem 的计算方式:
(function (desw) {
let screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
document.documentElement.style.fontSize= screenWidth / desw * 100 + “px”;
})(320); 320 表示设计稿的宽度
设置的font-size来改变rem尺寸

 :root{
      font-size:20px;
     }
.box{
      width:1rem;
      height:1rem;
      background-color:purple;
    }

将根元素html的font-size设置为20px，此时box的宽高都为20px，也就是1rem = 20px；
rem 和 em 单位的值可以转化为不同的像素值，而 px 单位保持固定大小。
使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。 我们可以使用这种灵活性，使我们在开发期间，能更加快速灵活的调整，允许浏览器用户调整浏览器大小来达到最佳体验。

四、vw:

这是 “视口宽度” 单位， 1vw 相同于视口宽度的 1%。不同之处在于，所有元素的值都保持一致，无论父元素宽度如何。

五、vh:

这个与 vw 单位相同，它是基于 视口的高度。

有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据 W3标准 ，它们是相对于使用em单位的元素的字体大小。
使用 Chrome 开发工具或 Firebug 为火狐浏览器来检查我们的 em 单位计算到的像素值。
em 单位是相对于他们最终获得(不是父元素)的字体大小
浏览器将调整使用 em 单位的 HTML 元素字体大小
当 em 单位设置在 html 元素上时，它将转换为em值乘以浏览器字体大小的设置。
媒体查询中使用 rem 单位
不要在多列布局中使用 em 或 rem ,改用%。

参考链接：https://www.jianshu.com/p/4f2a3810803e