六uniappvue3tsvite响应式原理

　　我们开发的项目一般都会有可视化界面，如下图：
　　我们需要考虑在各个设备上能够正常显示，我们就看看uniapp创建的项目，他的响应式是如何处理的？一、uniapp是如何实现响应式的？
　　uniapp的尺寸单位：px：屏幕像素单位。rpx：根据屏幕宽度自适应的动态单位，以750宽的屏幕为基准，750rpx恰好是屏幕宽度，rpx实际显示效果会等比放大，但在APP端和H5端屏幕宽度达到960px时，默认按照375px的屏幕宽度进行计算。
　　响应原理很简单：就是给html根节点设置字体大小，写样式的时候单位使用rpx，利用hBuilerX自带插件，将rpx单位自动转为rem。从而实现不同屏幕大小的适配。
　　当我们屏幕缩放到大于960px时，界面就没有明显的缩放，发现根节点的字体大小统一设置为16px，从而就会出现一个问题：
　　我们制作的东西在手机端是一套适配，大于960px之后又是一套适配，如果是制作PC和手机端，我们就以960px作为一个结点，如果是只做手机端，就会出现在ipad上排版乱了，我们如何灵活设置960px的大小呢？二、uniapp根节点字体大小如何设置？
　　uniapp项目中可以在page。json配置文件内，通过设置globalStyle进行配置：
　　属性
　　类型
　　默认值
　　描述
　　平台差异说明
　　rpxCalcMaxDeviceWidth
　　Number
　　960hrrpx计算所支持的最大设备宽度，单位px
　　App（vue2且不含nvue）、H5（2。8。12）
　　rpxCalcBaseDeviceWidth
　　Number
　　375hrrpx计算使用的基准设备宽度，设备实际宽度超出rpx计算所支持的最大设备宽度时将按基准宽度计算，单位px
　　App（vue2且不含nvue）、H5（2。8。12）
　　rpxCalcIncludeWidth
　　Number
　　750hrrpx计算特殊处理的值，始终按实际的设备宽度计算，单位rpx
　　App（vue2且不含nvue）、H5（2。8。12）
　　dynamicRpx
　　Boolean
　　false
　　动态rpx，屏幕大小变化会重新渲染rpx
　　Appnvue3。2。13
　　配置代码：｛pages：〔pages数组中第一项表示应用启动页，参考：https：uniapp。dcloud。iocollocationpages｛path：pagesindexindex，style：｛navigationBarTitleText：uniappvue3viteTS｝｝〕，globalStyle：｛navigationBarTextStyle：black，navigationBarTitleText：uniappvue3viteTS，navigationBarBackgroundColor：F8F8F8，backgroundColor：F8F8F8，rpxCalcMaxDeviceWidth：750，rpxCalcBaseDeviceWidth：375，rpxCalcIncludeWidth：750，dynamicRpx：true｝｝
　　更多配置可参考官网：https：uniapp。dcloud。iocollocationpages。htmlglobalstylehttps：uniapp。dcloud。iocollocationpages。htmlglobalstyle三、rpxpxrem之间的关系，以及如何转化的？
　　网上查找以及看官方文档，提示HbuilderX是在工具菜单设置编辑器设置，如图：
　　可以设置pr转rem比例，以及px转rpx的比例。
　　我手动修改参数，并重启HbuilderX软件，都未起作用。
　　始终保持的是：1rem32rpx
　　有知道在哪设置或者换算原理的吗？欢迎评论区一起探索！