在说正事之前，我要推荐一个福利：（你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)，好了下面开始说正事：

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

假设为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%
...
这样就达到了适配的目的

郑重声明：本站部分内容转载自网络，版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们（QQ/微信153890879）修改或删除，多谢。