【微信小程序】rpx尺寸单位的应用

前言：微信小程序中的rpx尺寸单位用起来很方便。他是怎么实现计算的呢？(这里要注意的是，常规浏览器解析css代码的时候会把font-size小于12px的字体转成12px,不会让他小于12px的，而微信小程序的字体是可以小于12px的)。

参考文章：【css】移动端响应式布局与响应式字体大小

 

一、rpx的应用。

 .testDiv { width: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;