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, //是否允许媒体查询中转换pxreplace: true,exclude: /(\/|\\)(node_modules)(\/|\\)/})]}}},

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

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

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

vw/vh：移动适配之vw/vh(使用方法)
使用vw/vh布局,可以实现视口宽度不同,网页元素宽高等比缩放效果,比rem的优势在于,在代码中直接写vw/vh就能实现移动适配效果,不用引入js文件,比rem更简单,但有兼容问题,目前大厂已经转型到 ...
html vw布局,完美的响应式布局vw+vh+rem屏幕适配方案！
一.前言根据前面写的你不知道的css单位,进行了一种响应式布局的思考. 视口布局的优点:宽度和高度全部自动适应!再加上rem布局的字体适应,可以完美解决各种屏幕适配问题! 单位可参考 : 你不知道 ...
vue怎么vw布局好用_Vue项目中使用vw实现移动端适配-阿里云开发者社区
我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...
Vite + Vue3 项目中，使用 vw/vh 适配移动端，并通过 Android Studio 打包
目录 1. 使用 vw/vh 适配移动端 1.1 使用 vite 初始化项目 1.2 安装插件,将 px 转化成 vw 1.2.1 在 vite.config.ts 中,声明插件 1.2.2 手写 p ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
【前端大屏可视化项目适配方案】
引自 https://juejin.cn/post/7009081081760579591#heading-27 感谢!!! 前端大屏可视化项目适配方案 1. 全局适配 1.1 css scale 适 ...
【vue】如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
转：如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
移动端vw vh适配
vw vh介绍属于一种新兴的移动端布局配置,功能与rem类似 vw 视口的最大宽度,1vw等于视口宽度的百分之一 vh 视口的最大高度,1vh等于视口高度的百分之一自动适配安装依赖 npm in ...

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

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

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

最新文章

热门文章