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

相关推荐
省钱兄--zs3 小时前
碰碰好评卡系统开发实战指南 核心功能实现与部署落地全流程拆解
数据仓库·经验分享·spring boot·小程序·架构
河北清兮网络科技3 小时前
在河北开发直播 APP,怎么挑选靠谱的软件公司?
小程序·app·短剧app·广告联盟
派小心.15 小时前
小程序分享链路中来源参数的传递校验
大数据·前端·数据库·人工智能·小程序·数据分析
一木 之林19 小时前
微信小程序开发全攻略·文章版|00 总览:74集学习路径与知识地图
人工智能·学习·计算机视觉·微信小程序·小程序
m0_587383001 天前
无人自助拼豆系统的全栈开发方案
java·后端·struts·小程序·架构
AI源码1 天前
雷山苗韵 - 非物质文化遗产传承平台
小程序·非遗小程序
CRMEB系统商城1 天前
CRMEB开源商城系统(PHP)v8.0,打造全新AI二开商城底座!
开发语言·人工智能·小程序·开源·php
一木 之林1 天前
微信小程序开发全攻略·文章版|01 入门与环境搭建
人工智能·学习·计算机视觉·微信小程序·notepad++
StevenLdh1 天前
第八期 · 情绪闯关挑战盒:一个「无惩罚」成就系统的数据建模
java·微信小程序