【vuejs】大屏自适应快速解决方案

最新推荐文章于 2024-05-17 10:30:00 发布

萌村村花杨小花

最新推荐文章于 2024-05-17 10:30:00 发布

阅读量2.8k

点赞数 5

分类专栏： vue javascript 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ysq0317/article/details/128930752

版权

本文介绍了在Vue.js中实现大屏自适应的两种方法：1) 使用transform:scale进行等比例缩放，常见于阿里云Datav，但可能存在问题；2) 结合flexible和csspost-pxtorem，通过px转rem实现正常放大缩小，适用于常规应用场景，但在非全屏模式下可能显示不完整。

摘要由CSDN通过智能技术生成

在使用vue开发可视化大屏的时候，通常会遇到自适应的要求。这里有两个常规尺寸的自适应解决方案

方案1：使用scale

使用transform:scale，等比例缩放来解决大屏的自适应，这一套解决方案阿里云的datav也有使用，但是vue里可以使用第三方插件，比如vue3-scale-box这一类。
1.安装

npm install vue3-scale-box --save   //安装插件

2.使用

//具体页面使用
app.vue
<template>
	<ScaleBox :width="1920" :height="1080">
		<router-view/>
	</ScaleBox>
</template>
<script>
import ScaleBox from "vue3-scale-box"
components:{
   
	scaleBox
}
</script>

这里面width和height就是设计稿的长宽

这个方法可能会遇到一些问题，慎重选择使用哦

方法2：使用flexible和csspost-pxtorem

这一个方法应该是比较常规的方法
使用插件自动的将写的px转换为rem来使用，放大缩小的展示都很正常

安装

npm install lib-flexible
npm install postcss-pxtorem

2.使用
在根目录新建postcss.config.js文件

module.exports = {
   
    "plugins": {
   
      "postcss-pxtorem": {
   
        rootValue: 192, // 设计稿宽度
        propList: ['*'],
        selectorBlackList: ['.norem'], // 过滤掉.norem-开头的class，不进行rem转换
        exclude:['screen'] //文件夹screen一下的文件不需要进行px-rem适配
      }
    }
  }

在本地新建一个rem.js文件刷新rem


; (function (win, lib) {
   
    var doc = win.document;
    var docEl = doc.documentElement;
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var rem;
    var flexible = lib.flexible || (lib.flexible = {
   });