移动端开发中vw和rem组合适配

什么是rem?
我们做的单位em表示元素的字体大小跟随父元素大小相关联，比如父元素字体大小为10px，那么1em就是10px，2em则是20px; 而rem其实就是元素依据根元素的字体大小进行设置,这样的话如果我们网页中的元素使用rem作为大小的单位，就能实现等比缩放，也叫rem布局；

说道移动端开发，就少不了对dpr的了解:
dpr：设备像素比，它等于物理像素（真正意义上的像素大小，比如移动设备的截图）/逻辑像素（CSS中我们要设置的像素大小）
常见的dpr有2和3（我们一般认为设计图为640或750px时所针对的设备的dpr为2，大于750px的，dpr为3）
那么这样一来呢，我们在移动端开发时，我们的逻辑像素就等于物理像素/dpr 也就是说，当dpr为2（最常见）时，如果我们想设计640px的设计图，那么我们就需要在CSS中设置宽度为640px/2=320px的逻辑像素。
另外我们要使用rem布局，就需要对px进行换算（w为方便计算我们通常设置html/body {fon-size=100px}） 那么320px就等于0.32rem ，也就是640px的物理像素，如果使用rem布局且100px大小的根元素参照，那么CSS中设置的大小就位0.32rem；

VW的引入
如果我们对rem的参照用px来定义的话，我们会发现，元素的大小依旧是很死板，是一个固定的值，无法根据屏幕的大小进行适配，那么这就需要一个可以根据窗口大小来进行改变的单位—>vw，作为rem的参考单位，vw简单来说就是元素所占当前窗口大小的比例，理论上100vw就等于100%d的窗口大小，也就是100vw=100%视口宽度。那么当屏幕宽度为640px时，我们依然用100px作为参考，换算成vw的思路：
100vw=640px而 1rem=100px 则？vw=100px呢（因为我们需要用?vw来作为rem的参考大小）答案是15.325vw 而当dpr为2时，我们所有的逻辑像素都要乘以2得到物理像素，所有我们直接用15.625的2倍31.25vw作为整体元素的参照，也就是给根元素设置font-size:31.25vw