vue-cli项目配置lib-flexible【阿里手淘移动端自适应解决方案】

rem: 相对长度单位,相对于根元素(即html元素)font-size计算值的倍数

安装 flexible和 px2rem-loader

px2rem-loader(自动将px转换为rem)

1
2
npm install lib-flexible --save
npm install px2rem-loader --save

引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

1
import 'lib-flexible'

去掉目标文件的index.html头里的meta标签

1
2
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
//不要写上这行meta,flexible会为根据屏幕自动给我加上,如果加了,那么flexible会根据你加的值来计算,也就会出现固定的值

配置px2rem-loade

在bulid文件下的utils.js文件下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 //1rem=多少像素 这里的设计稿是75px。
}
}
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, px2remLoader] : [cssLoader]
...
}

OK,到此结束。配置就这么简单,但是用起来可能有点小问题

px2rem 用法

安装px2rem后,在使用px上有些不同,大家可以参考px2rem官方介绍,下面简单介绍一下。

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

示例代码

编译前(自己写的代码)

1
2
3
4
5
6
.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}

安卓的data-dpr=1,iphone6,iphone5默认dpr为2,6plus,iphone7,8,x均为3

编译后(打包后的代码)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}

注意:不能在index.html的头部加 name 为 viewport 的 meta 标签,flexible会自动为我们添加!

注意:对外部引入css,如果遇到px2rem不能转换rem问题,解决方法:在vue-cli生成的文件中,找到文件 build/utils.js,添加配置:

1
2
3
4
5
6
7
8
9
10
11
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap,
importLoaders: 2 //在css-loader前应用的loader数目,默认为0
//如果不加这个,@import的外部css文件将不能正常转换
//如果还不行,试着调大数字
//记住:更改后,必须重启项目,否则不生效!!!
}
}

注意:如果我们如果引入了第三方框架,样式是另一套写法,样式会被flexible转换,就会破坏框架的样式,这个怎么解决呢?

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :