当前位置：网站首页 > 技术文章 > 正文

六、uni-app + vue3 + ts + vite 响应式原理

zhezhongyun 2025-07-03 20:52 29 浏览

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

我们需要考虑在各个设备上能够正常显示，我们就看看 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 进行配置：

属性	类型	默认值	描述	平台差异说明
rpxCalcMaxDeviceWidth	Number	960	rpx 计算所支持的最大设备宽度，单位 px	App（vue2 且不含 nvue）、H5（2.8.12+）
rpxCalcBaseDeviceWidth	Number	375	rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px	App（vue2 且不含 nvue）、H5（2.8.12+）
rpxCalcIncludeWidth	Number	750	rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx	App（vue2 且不含 nvue）、H5（2.8.12+）
dynamicRpx	Boolean	false	动态 rpx，屏幕大小变化会重新渲染 rpx	App-nvue 3.2.13+

配置代码：

{
 "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

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

max-width 属性

上一篇：竟然是真的!研究称婚后4年体重增速通常翻倍
下一篇：能量空间物质相互转化途径（能量与空间转换相对论公式）

六、uni-app + vue3 + ts + vite 响应式原理

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

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

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

相关推荐

Python每日一库之Beautiful Soup（python mtime）

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

推荐36种免费React模板和主题「干货」

旧手机新玩法，MacroDeck进阶指南

TrueNAS SCALE官方文档之人性化译注01-硬件配置指南

业余无线电UV段几种常见天线（uv段最强天线）

免费领取→可编辑危废标签模板首发!

今年最常见的前端面试题，你会做几道?

GitHub和码云上，7个h5页面制作工具推荐