我们开发的项目一般都会有可视化界面,如下图:
我们需要考虑在各个设备上能够正常显示,我们就看看 uni-app 创建的项目,他的响应式是如何处理的?
uni-app 的尺寸单位:
响应原理很简单:就是给 html 根节点设置字体大小,写样式的时候单位使用 rpx ,利用 hBuiler X 自带插件,将 rpx 单位自动转为 rem。从而实现不同屏幕大小的适配。
当我们屏幕缩放到大于 960px 时,界面就没有明显的缩放,发现根节点的字体大小统一设置为 16px ,从而就会出现一个问题:
我们制作的东西在手机端是一套适配,大于 960px 之后又是一套适配,如果是制作 PC 和 手机端,我们就以 960px 作为一个结点,如果是只做手机端,就会出现在 ipad 上排版乱了,我们如何灵活设置 960px 的大小呢?
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
网上查找以及看官方文档,提示 HbuilderX 是在“ 工具菜单 -> 设置 -> 编辑器设置 ”,如图:
可以设置 pr 转 rem 比例,以及 px 转 rpx 的比例。
我手动修改参数,并重启 HbuilderX 软件,都未起作用。
始终保持的是 :1rem = 32rpx
有知道在哪设置或者换算原理的吗?欢迎评论区一起探索!
页面更新:2024-03-05
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2008-2024 All Rights Reserved. Powered By bs178.com 闽ICP备11008920号-3
闽公网安备35020302034844号