Vue + echarts 项目 使用vh/vw适配

首先安装插件  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 图表时 记得把该事件也加上

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

猜你喜欢

转载自blog.csdn.net/Wang_x_y_/article/details/121767132