logo头像

人生若只如初见

vue使用rem适配移动端

vu移动端使用vant-ui、mint-ui,想做移动端适配,可以借助px2rem 插件方便的将px单位转为了rem。

安装

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

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

1
import 'lib-flexible/flexible.js'

在build下的 utils.js中,找到exports.cssLoaders = function (options) { } ,在里面添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}

// 找到generateLoaders 方法,只需添加 postcssLoader,修改成:
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader]

if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
}

index.html的head里的meta最好修改成下面,禁止手机端放大页面

1
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

重启项目,会发现默认的px自动被转为rem 了