微信小程序适配方案: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 来提高样式表的可维护性和可重用性。

相关推荐
AI源码15 小时前
在线考试小程序
小程序·notepad++
计算机毕设定制辅导-无忧学长15 小时前
《基于微信小程序健康习惯激励系统设计与实现》
java·spring boot·mysql·微信小程序·uniapp·健康习惯激励系统
2501_9160088918 小时前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
拖孩2 天前
流量主门槛从 500 降到 100,我的小程序上线 18 小时够到了线
前端·后端·微信小程序
云-缩影2 天前
做微信小程序,自建服务器还是用云托管:技术选型对比
服务器·微信小程序·小程序
极限挑战哥2 天前
共享电单车联营平台分账架构实践:二清合规与自动分账零人工方案
java·大数据·人工智能·微信小程序·架构·微信公众平台
超级新零售3 天前
服装订货会数字化:商品版本、订单状态与后续配发数据如何衔接?
大数据·小程序·企业微信
云-缩影3 天前
拆解微信小程序后端架构:ECS、RDS、SSL 和 VPC 怎么配合
微信小程序·架构·ssl
拖孩3 天前
AI 帮我写的小程序上线 44 天:36 个人进了收银台,8 个人付钱
前端·后端·微信小程序