vue适配,在屏上放大缩小内容按比例调整

vue适配,在屏上放大缩小内容按比例调整
如图整屏排布,这里以1920屏幕为例
vue适配,在屏上放大缩小内容按比例调整_第1张图片

屏可视区缩小
vue适配,在屏上放大缩小内容按比例调整_第2张图片

实现过程
1、项目安装插件
npm i lib-flexible -S
npm i px2rem-loader --save-dev

2、在index.html中更改meta
例如:去掉之前的meta


3、在main.js中引入
import 'lib-flexible’
4、 在build里的utils
vue适配,在屏上放大缩小内容按比例调整_第3张图片
然后第一步
vue适配,在屏上放大缩小内容按比例调整_第4张图片

第二步
vue适配,在屏上放大缩小内容按比例调整_第5张图片

5、 在node module中找到
vue适配,在屏上放大缩小内容按比例调整_第6张图片

然后修改
vue适配,在屏上放大缩小内容按比例调整_第7张图片

项目中对宽高之类的设定可用px为单位,系统会直接转为rem
vue适配,在屏上放大缩小内容按比例调整_第8张图片

重新启动项目,可以实现。

你可能感兴趣的:(javascript)