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

vue适配，在屏上放大缩小内容按比例调整如图整屏排布，这里以1920屏幕为例屏可视区缩小实现过程1、项目安装插件npm i lib-flexible -Snpm i px2rem-loader --save-dev2、在index.html中更改meta例如：去掉之前的meta<meta http-equiv=X-UA-Compatible content="IE=edge">3、在m

Fairyasd

2633人浏览 · 2021-06-30 15:40:22

Fairyasd · 2021-06-30 15:40:22 发布

vue适配，在屏上放大缩小内容按比例调整
如图整屏排布，这里以1920屏幕为例
在这里插入图片描述

屏可视区缩小
在这里插入图片描述

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

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

<meta http-equiv=X-UA-Compatible content="IE=edge">

3、在main.js中引入
import 'lib-flexible’
4、在build里的utils
在这里插入图片描述
然后第一步

第二步
在这里插入图片描述

5、在node module中找到
在这里插入图片描述

然后修改
在这里插入图片描述

项目中对宽高之类的设定可用px为单位，系统会直接转为rem
在这里插入图片描述

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^