使用uni-app框架进行移动端的适配（uniapp px转rpx）

第四，由于使用的是rpx单位，我希望移动端上，字体可以根据不同手机屏幕大小自动适配，在pc端就是固定尺寸，但问题时，由于使用match-media媒体查询时，移动端根据rpx自适应和Pc端保持文字大小固定产生冲突。第三，细微调整样式，我是根据uni.createMediaQueryObserver，监测是否符合条件，符合的一个样式，不符合的一个样式（该情况适用于html结构一样）。uni-app是以移动为先的理念诞生的，所以我们先开发出适配手机浏览器的网页，再来适配PC端。

本文介绍 Uniapp 中 px 和 rpx 单位。px 固定精确但难适配，适合特定场景；rpx 响应式易适配，有小偏差，按需灵活选用。

Uniapp 是一个跨平台开发框架，可以一套代码编译到多个平台（iOS、Android、H5、小程序等）。

uni-app px与rpx的转换

但是需要注意的是，这个不是严格安装这个来计算的。因此我调整比例为0.58，效果就好很多了。所以你把这个当作一个比例工具就好啦。时才会给你自动将整个页面单位转换。中修改单位数值转换规则。注意，这个插件是在你。

uniapp px rpx 互转

uniapp尺寸单位 uni-app 支持的通用 css 单位 包括 px、rpx px即屏幕像素 rpx即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大，但在APP端和H5端屏幕宽度达到960px时，默认按照 375px 的屏幕宽度进行计算，具体配置参考：rpx计算配置。 rpx计算配置 uni-app屏幕基准宽度 uni-app规定屏幕基准宽度为750rpx 开发者可以通过设计稿基准宽度计算页面元素 rpx

uniapp H5 px转换rpx

开发效率高：Uni-app提供了内置的组件库、丰富多样的模板和示例代码，并且支持HBuilderX可视化编辑器，可以快速搭建UI界面，省去了手写页面样式的繁琐过程。同时，在开发过程中，Uni-app还封装了常见API，例如路由、网络请求、存储、传感器等，加速了业务逻辑的实现，提升了开发的效率。保持学习和实践：Uni-app是一个不断更新和演变的框架，我们需要保持学习和实践，掌握最新的开发技术和解决方案，并将其应用到具体的项目中，在实践中不断积累经验和提高能力。

在uni-app中进行单位转换页面适配时，你可能需要处理不同设备上的屏幕尺寸和分辨率，确保页面在移动端和PC端都能良好显示。

一、移动端优先 一般建议直接给出750px的手机设计稿，通过rpx等比缩放。这里需要注意的是uniapp默认适配的最大屏幕宽度为960px，超过这个范围rpx将不生效，而某些平板的尺寸比如ipad pro宽度超过了这个数值，所以需要在pages.json中添加配置： "globalStyle": { "rpxCalcMaxDeviceWidth": 1024, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960 "rpxCalcBaseDeviceWidth": 375, // rpx

由于uniapp 是根据750rpx 为屏幕基准,那么如果设计稿假设宽度为375px,元素在设计稿的宽度是100px,那么转换成rpx就是 750 * (100 / 375) = 200rpx

开发中难免出现单位问题，就像获取系统信息，里面的屏幕宽度什么的都是px作为单位的，因此这里说明一下uniapp的转换使用 rpx转px uni.upx2px(rpx的值) px转rpx px的值/(uni.upx2px(10)/10) 使用的时候可以 let px = uni.upx2px(rpx的值)什么的 返回值就是计算好了的 ...

如下为把宽度为1px的转成对应手机型号的rpx。首先获取系统手机屏幕的宽度。

uniapp iOS Android h5 踩坑记录