什么是 upx？
upx 是 uni-app 提供的一种自适应尺寸单位。它的全称可以理解为 "uni-app pixel"。
它的设计理念和微信小程序的 rpx 完全相同，核心目标是：让你的页面元素在不同屏幕宽度的设备上实现按比例自适应。
为什么要用 upx？(设计原理)
在传统网页开发中，我们使用 px作为单位，但在不同宽度的手机屏幕上，固定 px的显示效果差异很大。upx就是为了解决这个问题而生的。
它的工作原理基于一个简单的规则：
官方规定：屏幕总宽度固定为 750upx。
这意味着：
无论你的手机屏幕是 iPhone 12 Mini (宽度 375px) 还是 iPhone 12 Pro Max (宽度 428px)，在 uni-app 眼里，它们的屏幕逻辑宽度都是 750upx。
每个设备的 1px等于多少 upx，是由公式动态计算出来的。
upx 与 px 的换算（核心规则）
换算公式：px = upx * (屏幕宽度 / 750)
换句话说：设备屏幕的实际像素宽度（px）除以 750，就是 1upx 在该设备上对应的像素值（px）。
我们来看几个例子：
设备
屏幕物理宽度 (px)
1upx 等于多少 px?
计算过程
一个 750upx 的视图宽度等于？
iPhone 6/7/8
375 px
0.5 px
375 / 750 = 0.5
充满整个屏幕宽度 (375px)
iPhone 12/13
390 px
0.52 px
390 / 750 ≈ 0.52
充满整个屏幕宽度 (390px)
iPhone 12 Pro Max
428 px
~0.57 px
428 / 750 ≈ 0.57
充满整个屏幕宽度 (428px)
结论：
一个 750upx 的元素，在任何宽度的屏幕上都会撑满整个屏幕宽度。
一个 375upx 的元素，在任何屏幕上都会占据屏幕宽度的一半。
如何使用 upx？
在 uni-app 的 Vue 文件或 NVue 文件的样式（
这段代码在不同宽度屏幕上的表现：
.box的宽度在任何屏幕上都是 (屏幕宽度 / 750) * 700px，几乎充满屏幕。
.logo的宽度在任何屏幕上都是屏幕宽度的 2/5(300/750)。
字体、内外边距都会按比例缩放，保持整个页面的布局协调。
最佳实践与注意事项
主要用于尺寸属性：width, height, margin, padding, font-size, top, left等尺寸相关的属性强烈推荐使用 upx。
不用于装饰属性：border, box-shadow, text-shadow等细小的装饰性属性通常使用 px，以保证1像素边框在任何屏幕上都能清晰显示。
NVue 的差异：在 NVue 中，upx是唯一支持的 CSS 单位（px会被直接忽略），并且不支持百分比 %。布局必须使用 flexbox结合 upx来实现。
与 rpx 的关系：upx和微信小程序的 rpx是等价的。在编译到小程序平台时，upx会直接被转换为 rpx。
设计稿适配：如果 UI 设计师给了 750px宽的设计稿，那么设计稿上的元素尺寸是多少 px，你在代码里就写多少 upx，即可实现完美还原。
总结
特性
upx
目的
实现跨屏幕尺寸的自适应布局
规则
屏幕总宽度恒为 750upx
公式
px = upx * (屏幕宽度 / 750)
使用场景
宽度、高度、字体大小、边距等尺寸属性
优点
极大简化了移动端适配工作，一套代码适配不同屏幕
掌握 upx是进行 uni-app 开发的基础，它能让你轻松写出自适应各种屏幕的优雅界面。