【⼩程序】使⽤uni-app搭建⼩程序环境---尺⼨单位
uni-app⽀持的通⽤ css 单位包括 px、rpx
px 即屏幕像素
rpx 即响应式px，⼀种根据屏幕宽度⾃适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显⽰效果会等⽐放⼤。
vue页⾯⽀持普通H5单位，但在nvue⾥不⽀持：
rem 默认根字体⼤⼩为屏幕宽度/20（⼩程序、头条⼩程序、App、H5）
vh viewpoint height，视窗⾼度，1vh等于视窗⾼度的1%
vw viewpoint width，视窗宽度，1vw等于视窗宽度的1%
rpx详细说明：
⼩程序设计了 rpx 解决这个问题，uni-app在 App 端、H5 端都⽀持了rpx。
rpx 是相对于基准宽度的单位，可以根据屏幕宽度进⾏⾃适应。
uni-app规定屏幕基准宽度 750rpx。
开发者可以通过设计稿基准宽度计算页⾯元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：　
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx　
换⾔之，页⾯元素宽度在uni-app中的宽度计算公式：
750 * 元素在设计稿中的宽度 / 设计稿基准宽度
举例说明：
1. 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在uni-app⾥⾯的宽度应该设为：750 * 100 / 750，结果
为：100rpx。
2. 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在uni-app⾥⾯的宽度应该设为：750 * 100 / 640，结果
为：117rpx。
3. 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在uni-app⾥⾯的宽度应该设为：750 * 200 / 375，结果
为：400rpx。
Tips
注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越⼤。如不想根据屏幕宽度缩放，则应该使⽤ px 单位。
如果开发者在字体或⾼度中也使⽤了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变⼤、⾼度会变⼤。如果你需要固定⾼度，则应该使⽤ px 。
rpx不⽀持动态横竖屏切换计算，使⽤rpx建议锁定屏幕⽅向
设计师可以⽤ iPhone6 作为视觉稿的标准。
如果设计稿不是750px，HBuilderX提供了⾃动换算的⼯具，详见：。
如何制作app小程序App端，在 pages.json ⾥的 titleNView 或页⾯⾥写的 plus api 中涉及的单位，只⽀持 px，不⽀持 rpx。
早期 uni-app 提供了 upx ，⽬前已经推荐统⼀改为 rpx 了，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。