• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

 

一、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;


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序FAQ发布时间:2022-07-18
下一篇:
微信小程序入门三: 简易form、本地存储发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap