1.安装
npm install lib-flexible --save
npm install postcss-px2rem --save
2.视口配置
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum=scale=1.0">
3.引入,添加配置
main.js
import 'lib-flexible/flexible'
build/utils.js
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath:'../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
4.使用
安装px2rem后,再使用px上有些不同,大家可以参考px2rem官方介绍,下面简单介绍一下。
直接写px,编译后会直接转化成rem ---- 除开下面两种情况,其他长度用这个
在px后面添加/*no*/
,不会转化px,会原样输出。 --- 一般border需用这个
在px后面添加/*px*/
,会根据dpr的不同,生成三套代码。---- 一般字体需用这个
----------------------------------2019-05-30-------------------------------------------------
发现引用后第三方的UI库会变小,原因是第三方的dpr是写死1,所以需要忽略掉他们的css
首先,需要卸载项目中的postcss-px2rem。
npm uninstall postcss-px2rem --save-dev
其次,安装postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
然后在.postcss.js下配置
'postcss-px2rem-exclude': {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
'postcss-px2rem-exclude': {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
}
最后记得把utils.js下的postcss-px2rem配置注释就ok了