可视化项目使用vw/vh布局进行适配

最新推荐文章于 2025-03-17 16:12:49 发布

阿飞非非非

最新推荐文章于 2025-03-17 16:12:49 发布

阅读量1k

点赞数 6

文章标签： vue.js 前端 echarts

本文链接：https://blog.youkuaiyun.com/weixin_54423679/article/details/121669532

版权

本文介绍了如何在Vue.js构建的可视化项目中利用vw/vh单位进行响应式布局。通过安装postcss-px-to-viewport插件，并在vue.config.js中配置相关属性，可以将px转换为vw/vh，实现不同设备的适配。同时，在引入ECharts时，需在ECharts初始化代码中应用适配策略，确保ECharts图表也能完美适配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue写可视化项目，使用vw/vh适配

首先安装插件 npm install postcss-px-to-viewport --save-dev
在vue.config.js文件里面配置一下属性以及代码

	css: {
	    loaderOptions: {
	      postcss: {
	        plugins: [
	          require("postcss-px-to-viewport")({
	            unitToConvert: "px",//转换哪些尺寸单位
	            viewportWidth: 1920,//设计图宽度-代表1920px=100vw 也就是100%
	            unitPrecision: 3,//指定`px`转换为视窗单位值的小数位数
	            propList: [
	              "*"
	            ],
	            viewportUnit: "vw",
	            fontViewportUnit: "vw",
	            selectorBlackList: ['#app'], // 指定不需要转换的类
	            minPixelValue: 1, //小于或等于`1px`时不转换为视窗单位
	            mediaQuery: false, //是否允许媒体查询中转换px
	            replace: true,
	            exclude: /(\/|\\)(node_modules)(\/|\\)/
	          })
	        ]
	      }
	    }
	},

使用echarts引用的时候
需要把下面代码加到使用echarts插件的代码里面就可以适配echarts。

  window.addEventListener("resize", function() {
        myChart.resize();
      });