微信小程序适配方案:rpx(responsive pixel响应式像素单位)

小程序适配单位:rpx

规定任何屏幕下宽度为750rpx

小程序会根据屏幕的宽度自动计算rpx值的大小

Iphone6下:1rpx = 1物理像素 = 0.5css

小程序编译后,rpx会做一次px换算,换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx=1px,举个例子:IPhone6屏幕宽度为375px,共750个物理像素,那么1rpx=375/750px=0.5px

设备 rpx换算px(屏幕宽度/750) px换算rpx(750/屏幕宽度)

IPhone5 1rpx=0.42px 1px=2.34rpx

IPhone6 1rpx=0.5px 1px = 2rpx

IPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

一般情况下,我们所选用的机型是IPhone6 因为它对于换算来说会比较方便一点

那么除了使用wxss之外,我们同样也可以使用less来定义样式

使用 Less 可以让样式表更加简洁、易读、易维护。

首先我们需要配置

配置完成之后我们就可以使用less来定义样式了,

需要注意的是,使用 Less 编写样式会增加编译时间和运行时间的开销,如果项目比较小,建议直接使用原生的 CSS 样式;如果项目比较大,可以考虑使用 Less 来提高样式表的可维护性和可重用性。

相关推荐
不如摸鱼去6 小时前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
微信小程序·小程序·uni-app·aigc·ai编程
意会8 小时前
微信闪照小程序实现
前端·css·微信小程序
小白_ysf11 小时前
uniapp 开发微信小程序,获取经纬度并且转化详细地址(单独封装版本)
微信小程序·uni-app
weixin_lynhgworld16 小时前
剧本杀小程序系统开发:构建剧本杀社交新生态
小程序
说私域16 小时前
基于定制开发开源 AI 智能名片 S2B2C 商城小程序的热点与人工下发策略研究
人工智能·小程序
weixin_lynhgworld16 小时前
陪诊小程序系统开发:让就医不再是一件难事
小程序
是一碗螺丝粉1 天前
拯救你的app/小程序审核!一套完美避开审核封禁的URL黑名单机制
前端·javascript·微信小程序
weixin_lynhgworld1 天前
盲盒抽谷机小程序系统开发:从0到1的完整方法论
小程序
weixin_lynhgworld1 天前
短剧小程序系统开发:赋能创作者,推动短剧艺术创新发展
小程序
一匹电信狗2 天前
【C++】异常详解(万字解读)
服务器·c++·算法·leetcode·小程序·stl·visual studio