vue + flexible 的使用方案

1. npm install lib-flexible --save安装 lib-flexible的依赖。在入口文件的main.js 引入。 import 'lib-flexible'2. npm install px2rem-loader --save-dev安装px2rem-loader，用来把px转化为rem。在build文件夹下的utils.js的文件中添加以下代码...

一颗全能小菜机儿

6795人浏览 · 2019-07-25 12:38:16

一颗全能小菜机儿 · 2019-07-25 12:38:16 发布

1. npm install lib-flexible --save

安装 lib-flexible的依赖。在入口文件的main.js 引入。 import 'lib-flexible'

2. npm install px2rem-loader --save-dev

安装px2rem-loader，用来把px转化为rem。

在build文件夹下的utils.js的文件中添加以下代码。

options 配置的remUnit 设置为75，表示75px将会转化为1rem。

配置loader的加载顺序，cssLoader, postcssLoader, px2remLoader，需要放在postcssLoader后面，顺序一定要对。

配置完成，然后重启项目。即可生效。

关于px2rem的写法，

直接写px，编译后会直接转化成rem ---- 除开下面两种情况，其他长度用这个
在px后面添加/*no*/，不会转化px，会原样输出。 --- 一般border需用这个
在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个

flexible的效果会在html 头部设置这样的格式：<html data-dpr="1" style="font-size: 37.5px;"><head>

最大是54px,是因为flexible的js 里面有如下代码：

改成750,这样就能适应750的设计稿了。

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}$/, //不连续的两位字母// /^