前言:微信小程序中的rpx尺寸单位用起来很方便。他是怎么实现计算的呢?(这里要注意的是,常规浏览器解析css代码的时候会把font-size小于12px的字体转成12px,不会让他小于12px的,而微信小程序的字体是可以小于12px的)。
一、rpx的应用。
.testDiv { 300rpx; height:200rpx; line-height:200rpx; background:#ccc; font-size:36rpx; text-align:center;
<view class='testDiv'>
hello world
</view>
在宽度为750px像素设备下的运行效果:
在宽度为414px像素设备下的运行效果:
在宽度为375px像素设备下的运行效果:
该testDiv的宽度是设置为300rpx,高是设置为200rpx,而font-size是设置为36rpx。在宽度为750px像素设备下的运行效果与平常设置的px效果无异,在宽度为375px像素设备下的运行效果就缩小了一倍。
从中不难看出来rpx尺寸单位的运算公式。
新值 = 值*(设置宽度/750)
在宽度为414px像素设备下的运算过程:
300*(414/750) = 165.6;
200*(414/750) = 110.4;
36*(414/750) = 19.827;
在宽度为375px像素设备下的运算过程:
300*(375/750) = 150;
200 = 200*(375/750) = 100;
36 = 36*(375/750) = 18;