小程序模板网

今天看看来研究下微信小程序没人关注的的东西:em 和 rem

基本上,在微信小程序里面很多人用的都是rpx作为单位,但是小程序里面也可以用em 和 rem 作为单位,只不过他们相对于rpx来说看起来是有点麻烦了些。自己就来摸索下若果使用相对单位的时候,是个什么样的机制。

首先 ,在宽度为320px的宽度下。先上一段

 

				
  1. <view style="font-size:16px;">这是一段文字</view>
  2. <view style="font-size:1em;">这是一段文字</view>
  3. <view style="font-size:1rem;">这是一段文字</view>
  4. <view>这是一段文字</view>

图如下 

  在图里面我们可以看到,视图里面的字体大小也是一样大小的,也就是说,在这个宽度下,16px=1rem=1em。

然后,在宽度375px的宽度下,如果是上面的那个结构的话,  显示出来的效果是这样的, 

  从上面的图看出来,在这个宽度下,上述的结果是不成立。但是,在这个宽度下,18.75px=1rem=1em.

 

				
  1. <view style="font-size:18.75px;">这是一段文字</view>
  2. <view style="font-size:1em;">这是一段文字</view>
  3. <view style="font-size:1rem;">这是一段文字</view>
  4. <view>这是一段文字</view>

这个时候如图显示 

上述结果就是成立的。

上面的18.75px是怎么来的?在这里,设定一个当前字体默认数值N 宽度为w  则 宽度数值 与 字体默认数值之比为W/N  这个时候会发现,320px宽度的时候这个比值为20,把这个套用在375px宽度的时候 是18.75px  360px的宽度的时候是18px  414px的宽度的时候是20.7px  在不同的宽度下,仅仅针对根节点的文字大小的时候,这个时候1rem=1em 等于当前宽度的默认字体大小的数值规则的。

在官方手册文档中 可以得到rpx与px关系。那是否跟上述有关系呢,这里继续在来看下。  因为每个宽度下不设定字体都有个默认的字体的大小。所以用rpx与px的关系来测测看。  320px宽度时 16px=37.5rpx  360px宽度时 18px=37.5rpx  375px宽度时 这里就是出现了一个问题 上面两个宽度是整除数 到了这个宽度的时候,是18.75px,此时的px与rpx规则下18px=36rpx是成立的。也是是说18.75px=37.5rpx才对 但是,在设置37.5rpx的时候我通过调试面板来观察,但是这个时候 去不是18.75px的字体大小而是18px。。。。  再来看看412px的宽度 这时候的字体大小20.6px=37.5rpx;转到调试面板的时候却发现依旧如此,小数点后面的被去掉了。但是,每个宽度下的根据规则得出的rpx的值却是一定的。

所以从上面看出,使用rpx的的单位在不同的单位下面,他的值是一样的,但是使用rem 或者 em的时候,此时的rpx的值跟rem/em的值还是有些出入的。

最后说下,上述的测试也许不是很严谨,但是,最好在编写小程序的时候用rpx最好。这个测试看看就好,没必要深究。



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23415.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询