rem和em
1.什么是em？
em是前端开发中的一个动态单位, 是一个相对于元素字体大小的单位 例如font-size: 12px;那么1em就等于12px。
1.1.em特性
- 当前元素设置了字体大小, 那么就相对于当前元素的字体大小
- 当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小
- 如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小
结论: em是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)
2.1.什么是rem？
rem=root em, 和em是前端开发中的一个动态单位, rem和em的区别在于, rem是一个参考根元素字体大小的单位。 例如，根元素(html) font-size: 12px; ,那么1em就等于12px；修改html字体大小一般利用js进行修改，原有页面的字体大小通过body来设置，不会对网页字体产生影响。
2.2.rem特点
- 除了根元素以外, 其它祖先元素的字体大小不会影响rem尺寸
- 如果根元素设置了字体大小, 那么就相对于根元素的字体大小
- 如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小
结论: rem是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位)
倍率的概念
倍率DPR(devicePixelRatio)： 手机分辨率（物理像素）/开发尺寸(逻辑像素)
- js代码获取当前设备倍率:
window.devicePixelRatio - 普通屏幕: DPR为1，表示代码1px对应屏幕上面1个发光点
- 高清屏幕:DPR为2，表示代码1px对应屏幕上面4个发光点
rem布局使用场景
需要适配各种型号的移动设备宽高。
一般UI设计师会根据手机分辨率给2/3倍图，需要根据不同手机分辨率设置不同的rem值。 企业开发中，一般会将设计图分为10份，所以document.documentElement.style.fontSize = 1/10屏幕宽度（需要除以DPR倍数）。
若是用VScode可以使用cssrem插件，设置了html的字体大小后，插件会自动帮我们计算rem=设计图尺寸px/fontSize。(注意用插件计算时设置的px单位需要除以DPR的倍数)
若手动计算，公式如下：
将设计图片分为X等份，目标手机屏幕尺寸也分为X等份；
假设设计图尺寸为640，就是fontSize = 640/X；
css设置尺寸：原始图片尺寸/X(rem)
