rem 和其他单位的区别 ？

先说一下几个的特性

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

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

3. rem: 是 CSS3 新增的一个相对单位 ，像 em，但是它总是相对于 “根”元素 HTML 的字体带下来计算。
   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 表示设计稿的宽度

还需要在 body 选择器中声明 font-size: 100px;
为什么要 100 因为这么写好计算，比如: 宽度是 100 px 就直接写 1rem

4. %: 比百分比形式设置的长度基于父元素的相同属性的长度。 例如：如果一个盒子的宽度是 500px ，那么那么他的子元素的宽度设置为 50% ，就相当于 250px;

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

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