rem布局原理分析

 /* rem布局 */
        /* 我们拿到设计稿一般是750px宽度,这个时候可以利用js软件自动获取屏幕宽度
        然后将其屏幕划分成10等分,这时淘宝的做法,然后将VW / 10 = fz 作为html标签的文字大小
        此时我们拿到的设计稿尺寸是750px,那么这个时候我们的html字体大小是75px,
        然后我们在写页面的时候都是按照html字体大小为75px来利用rem写页面,
        我们这个时候就可以将设计稿中尺寸 / html字体大小 = 来得到rem尺寸, 
        我们再来分析一下,这个时候得到的rem尺寸由那些变量运算得到的,
        设计稿中尺寸(单位px) / (屏幕尺寸px) / 划分份数(无单位) = 最准得到无单位的一个比例数值,
        这个比例数值和设计稿尺寸,vw,和划分份数都有关系,其中设计稿尺寸不变,VW视口随着窗口变化
        划分份数不变,这样一个等式左边两个值不变一个值在变化,所以得到的值也跟着这个视口宽度而变化,
        这样我们就实现了通过获取视口宽度然后让设计稿中布局的字体或者盒子大小尺寸进行等比例缩放
        但是这里设计稿的px尺寸是提供的二倍图,这个二倍图的设计稿我们在布局的时候需要进行除2吗?
        其实我们可以这么考虑,我们首先要做的是什么是二倍图,二倍图是针对像素和设备的物理像素不同而提出的
        即设计稿中的1*1px在设备上会被用4个物理像素显示,所以看上去放大了2倍,而我们 这次是将设备的屏幕尺寸为
        出发点,将其划分成多份,故不涉及二倍图的关系,按照设计稿尺寸布局就行,

        到这里我们就开始布局了,于是我们开始将设计稿中的尺寸除以750px像素下的html字体(设备宽度[这里是750px默认布局] / 划分份数)
        但是css中不能计算结果,但是可以借助calc(来计算),得到的结果是满屏的calc计算,
        不方便布局,降低效率,于是引出less,less中不仅可以计算还可以设定变量,但是在less中就算可以计算不