uni-app px与rpx的转换
<h1 id="articleContentId" class="title-article">uniapp尺寸单位 px转rpx</h1><p>uniapp尺寸单位<br>uni-app 支持的通用 css 单位 包括 px、rpx。<br>px即屏幕像素<br>rpx（responsive pixel) 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大，但在APP端和H5端屏幕宽度达到960px时，默认按照 375px 的屏幕宽度进行计算。</p>
<h4>rpx计算配置</h4>
<p><img src="https://img2023.cnblogs.com/blog/1474945/202303/1474945-20230322175733952-1767981556.png"></p>
<p> </p>
<p> </p>
<h4>uni-app屏幕基准宽度</h4>
<p>uni-app规定屏幕基准宽度为750rpx<br>开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：</p>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750 rpx
</pre>
</div>
<p>HBuilderX 自动转px为rpx<br>在HBuilderX 【工具】-【设置】-【语言服务配置】中进行配置</p>
<p>uni-app规定屏幕基准宽度为750rpx<br>如果设计稿的基准宽度为750px，那么这里的值就填写 750 / 750 = 1<br>如果设计稿的基准宽度为640px，那么这里的值就填写 640 / 750 = 0.8533333333333333<br>依次类推<br><img src="https://img2023.cnblogs.com/blog/1474945/202303/1474945-20230322180024578-1436504986.png"></p>
<p> </p>
<p> </p>
<p>参考资料<br>uniapp尺寸单位：</p>
<p><span style="color: rgba(255, 0, 0, 1)">https://uniapp.dcloud.io/frame?id=%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D</span></p>
<p>HBuilderX 自动转px为rpx：<br><span style="color: rgba(255, 0, 0, 1)">https://hx.dcloud.net.cn/Tutorial/settings/px-upx</span></p>
<p>uni-app rpx计算配置：<br><span style="color: rgba(255, 0, 0, 1)">https://uniapp.dcloud.io/collocation/pages?id=globalstyle</span><br><br></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/sttchengfei/p/17244980.html
頁:
[1]