高斋晓开卷，独共圣人语。这篇文章主要讲述小程序使用uni-app搭建小程序环境---尺寸单位相关的知识，希望能为你提供帮助。
【小程序使用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 * 元素在设计稿中的宽度 / 设计稿基准宽度
-
举例说明：
- 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在
uni-app里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。 - 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在
uni-app里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。 - 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在
uni-app里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。
- 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在
- 注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。
- 如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用 px 。
- rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向
- 设计师可以用 iPhone6 作为视觉稿的标准。
- 如果设计稿不是750px，HBuilderX提供了自动换算的工具，详见：https://ask.dcloud.net.cn/article/35445。
- App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。
- 早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了，详见
推荐阅读
- appium自动化之模拟手指行为
- 小程序使用uni-app搭建小程序环境---css变化
- 小程序使用uni-app搭建小程序环境---弹窗
- Android开发 Fragment里监听返回键
- Android实现EditText插入表情超链接等格式
- 问题管理-- Struts2配置struts.xml中Action访问报There is no Action mapped for namespace...
- IIS放置的APP安装包在浏览器无法打开
- Web项目Bin目录下的文件改动会引发Application_End事件,IIS会回收线程
- Android su源代码