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 } }
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 }) }) } }
|
1
| <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
重启项目,会发现默认的px自动被转为rem 了