我们开发的项目一般都会有可视化界面，如下图：

我们需要考虑在各个设备上能够正常显示，我们就看看 uni-app 创建的项目，他的响应式是如何处理的？

一、uni-app 是如何实现响应式的？

uni-app 的尺寸单位：

• px：屏幕像素单位。
• rpx：根据屏幕宽度自适应的动态单位，以 750 宽的屏幕为基准，750rpx 恰好是屏幕宽度，rpx 实际显示效果会等比放大，但在APP端和H5端屏幕宽度达到 960px 时，默认按照 375px 的屏幕宽度进行计算。

响应原理很简单：就是给 html 根节点设置字体大小，写样式的时候单位使用 rpx ，利用 hBuiler X 自带插件，将 rpx 单位自动转为 rem。从而实现不同屏幕大小的适配。

当我们屏幕缩放到大于 960px 时，界面就没有明显的缩放，发现根节点的字体大小统一设置为 16px ，从而就会出现一个问题：

我们制作的东西在手机端是一套适配，大于 960px 之后又是一套适配，如果是制作 PC 和 手机端，我们就以 960px 作为一个结点，如果是只做手机端，就会出现在 ipad 上排版乱了，我们如何灵活设置 960px 的大小呢？

二、uniapp 根节点字体大小如何设置？

uni-app 项目中可以在 page.json 配置文件内，通过设置 globalStyle 进行配置：

配置代码：

{
 "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  {
   "path": "pages/index/index",
   "style": {
    "navigationBarTitleText": "uni-app-vue3+vite+TS"
   }
  }
 ],
 "globalStyle": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "uni-app-vue3+vite+TS",
  "navigationBarBackgroundColor": "#F8F8F8",
  "backgroundColor": "#F8F8F8",
  "rpxCalcMaxDeviceWidth": 750,
  "rpxCalcBaseDeviceWidth": 375,
  "rpxCalcIncludeWidth": 750,
  "dynamicRpx": true
 }
}

更多配置可参考官网：https://uniapp.dcloud.io/collocation/pages.html#globalstylehttps://uniapp.dcloud.io/collocation/pages.html#globalstyle

三、rpx px rem 之间的关系，以及如何转化的？

网上查找以及看官方文档，提示 HbuilderX 是在“ 工具菜单 -> 设置 -> 编辑器设置 ”，如图：

可以设置 pr 转 rem 比例，以及 px 转 rpx 的比例。

我手动修改参数，并重启 HbuilderX 软件，都未起作用。

始终保持的是 ：1rem = 32rpx

有知道在哪设置或者换算原理的吗？欢迎评论区一起探索！