uni-app 尺寸单位
<p>重点：</p><p>px屏幕像素<br>rpx响应式px<br>屏幕基准：750px<br>公式换算：<br>750*元素在设计稿中的宽度/设计稿基准宽度</p>
<p>例如：设计稿宽度375px,元素在设计稿上的宽度为200px,那么元素在uniapp中的宽度应该设计为750*200/375，即400rpx</p>
<p> </p>
<h2 id="尺寸单位">尺寸单位</h2>
<p><code>uni-app</code> 支持的通用 css 单位包括 px、rpx</p>
<ul>
<li>px 即屏幕像素</li>
<li>rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx 计算配置 。</li>
</ul>
<p>vue 页面支持下面这些普通 H5 单位，但在 nvue 里不支持：</p>
<ul>
<li>rem 根字体大小可以通过 page-meta 配置</li>
<li>vh viewpoint height，视窗高度，1vh 等于视窗高度的 1%</li>
<li>vw viewpoint width，视窗宽度，1vw 等于视窗宽度的 1%</li>
</ul>
<p>nvue 还不支持百分比单位。</p>
<p>App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpx</p>
<p>nvue 中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中基本一致，另外启用 dynamicRpx 后可以适配屏幕大小动态变化。weex 模式目前遵循 weex 的单位，它的单位比较特殊：</p>
<ul>
<li>px:，以 750 宽的屏幕为基准动态计算的长度单位，与 vue 页面中的 rpx 理念相同。（一定要注意 weex 模式的 px，和 vue 里的 px 逻辑不一样。）</li>
<li>wx：与设备屏幕宽度无关的长度单位，与 vue 页面中的 px 理念相同</li>
</ul>
<p>下面对 <code>rpx</code> 详细说明：</p>
<p>设计师在提供设计图时，一般只提供一个分辨率的图。</p>
<p>严格按设计图标注的 px 做开发，在不同宽度的手机上界面很容易变形。</p>
<p>而且主要是宽度变形。高度一般因为有滚动条，不容易出问题。由此，引发了较强的动态宽度单位需求。</p>
<p>微信小程序设计了 rpx 解决这个问题。<code>uni-app</code> 在 App 端、H5 端都支持了 <code>rpx</code>，并且可以配置不同屏幕宽度的计算方式，具体参考：rpx 计算配置。</p>
<p>rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。<code>uni-app</code> 规定屏幕基准宽度 750rpx。</p>
<p>开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：</p>
<p><code>设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx</code></p>
<p>换言之，页面元素宽度在 <code>uni-app</code> 中的宽度计算公式：</p>
<p><code>750 * 元素在设计稿中的宽度 / 设计稿基准宽度</code></p>
<p>举例说明：</p>
<ol>
<li>若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 <code>uni-app</code> 里面的宽度应该设为：<code>750 * 100 / 750</code>，结果为：100rpx。</li>
<li>若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 <code>uni-app</code> 里面的宽度应该设为：<code>750 * 100 / 640</code>，结果为：117rpx。</li>
<li>若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 <code>uni-app</code> 里面的宽度应该设为：<code>750 * 200 / 375</code>，结果为：400rpx。</li>
</ol>
<p>Tips</p>
<ul>
<li>注意 rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。如不想根据屏幕宽度缩放，则应该使用 px 单位。</li>
<li>如果开发者在字体或高度中也使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用 px 。</li>
<li>rpx 不支持动态横竖屏切换计算，使用 rpx 建议锁定屏幕方向</li>
<li>设计师可以用 iPhone6 作为视觉稿的标准。</li>
<li>如果设计稿不是 750px，HBuilderX 提供了自动换算的工具，详见：HBuilderX中自动转换px为upx。</li>
<li>App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。</li>
<li>早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了，详见</li>
</ul><br><br>
来源：https://www.cnblogs.com/beichengshiqiao/p/17045749.html
頁:
[1]