HTML对信息化大屏的像素适应解决方案autofit.js

        在政务信息化过程,各政务机关引入了信息化大屏设备,而大屏的像素设置往往受到安装场地的高宽限制,形成了不规则的像素;而系统软件往往是规则的1920*1080的分辨率;不管大屏怎么分屏显示,都很难占满整个大屏。

        这种情况下,我们推荐两种方案,大屏分辨率是1920*1080的偶数倍,就利用大屏的分屏软件,将大屏划分为多各标准1920*1080分辨率标准平,再利用多个电脑他同时投屏。

        另一种方案,在系统中引入autofit.js,根据大屏的分辨率设置分辨率,利用js代码自适应大屏分辨率。

        下图是利用autofit.js自适应大屏分辨率后,在PC机上的显示;图示分辨率已经更改为3840*1080的分辨率。

        

当前提供的引用中未直接提及使用autofit.js解决显示白边问题的具体方法。不过,autofit.js可用于适配,只需配置设计稿尺寸,就能让在任何分辨率下保持布局比例一致,配合路由切换、菜单适配等功能,快速搭建生产级应用 [^1]。 使用时引入 `import autofit from 'autofit.js'`,在启动时调用 `autofit.init()`,默认参数为1920*929(即去掉浏览器头的1080),在 `App.vue` 中需要在 `renderDom` 挂载到dom之后才生效,示例代码如下: ```vue export default { mounted() { autofit.init({ designHeight: 1080, designWidth: 1920, renderDom: "#app", resize: true }) } } ``` 以上使用的是默认参数,可根据实际情况调整,参数分别为: - `renderDom`(可选):渲染的dom,默认是 "#app",必须使用id选择器; - `designWidth`(可选):设计稿的宽度,默认是 1920; - `designHeight`(可选):设计稿的高度,默认是 929 ,如果项目以全展示,则可以设置为1080; - `resize`(可选):是否监听resize事件,默认是 true [^2]。 若 `ignore` 无法满足需求,可以使用 `autofit.elRectification(".classNameOrId")`,示例代码如下: ```vue import { elRectification } from 'autofit.js' <template> <div class="G2plot"></div> <div class="G2plot"></div> <div class="G2plot"></div> </template> <script setup> import { onMounted } from 'vue'; onMounted(() => { elRectification(".G2plot") }) </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

magic33416563

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值