Less预处理rem

Question

`
@fontSizeBase: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
@{name}: @px / @fontSizeBase * 1rem;
}
`
以上代码，
请问1：@px / @fontSizeBase * 1rem;是如何推的?
请问2：为什么基础值是75?

Answer 1

假设为iPhone6做适配,它的css分辨率是375667.物理分辨率是7501334.

UI作图一般是按750作图,即2x图

rem适配方案本质就是基于整体尺寸按比例适配.
但是css中的百分比是相对于父元素来计算.为了使我们写样式时便于计算,就需要找到一个单位,它必须是一个基于一个统一的参照物的比例单位,rem就是这样一个单位,它是指基于html根元素的字体大小来计算尺寸.

习惯上,我们把屏幕分为10份,用脚本检测设备宽度,将html的字体大小设置为设备宽度的1/10.
这样一来,当我们所有尺寸单位均使用rem时,就使所有的尺寸都与设备宽度挂上了钩.

再来看计算公式.
当UI(基于750尺寸)绘制了一个方块,100*100.
在设计稿中,以宽度为例,占比为 13.33%;
转化为rem的话,就是(100/75)-->1.333rem

使用less的话,需要编译到css,最终输出的css代码就是

width: 1.333rem;
height: 1.333rem;

当这份代码到达设备时
假设是iPhone6,脚本将html字体设置为37.5px;则方块尺寸最终计算为49.99px,占比为49.99/375-->13.33%
假设是iPhoneX,脚本将html字体设置为41.4px;则方块尺寸最终计算为55.2px,占比为55.2/414-->13.33%
...
这样就达到了适配的目的