依赖包:postcss-pxtorem
配置:如下有三种不同方案进行配置(最好搭配最后面的rem.js文件进行使用)
方案一、在项目根目录下创建 postcss.config.js
配置如下:
module.exports = () => ({
plugins: [
require("autoprefixer")(),
// require("postcss-px2rem")({ remUnit: 75 })
require("postcss-pxtorem")({
rootValue: 65,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
propList: ["*"]
})
]
})
rootValue
(Number)根元素字体大小。unitPrecision
(数字)允许REM单位增长的十进制数。propList
(数组)可以从px更改为rem的属性。- 值必须完全匹配。
- 使用通配符
*
启用所有属性。例:[‘*‘]
*
在单词的开头或结尾使用。([‘*position*‘]
会匹配background-position-y
)- 用于
!
与属性不匹配。例:[‘*‘, ‘!letter-spacing‘]
- 将“not”前缀与其他前缀组合在一起。例:
[‘*‘, ‘!font*‘]
selectorBlackList
(数组)要忽略的选择器并保留为px。- 如果value是string,则检查selector是否包含字符串。
[‘body‘]
会匹配.body-class
- 如果value是regexp,它会检查选择器是否与正则表达式匹配。
[/^body$/]
会匹配body
但不会.body
- 如果value是string,则检查selector是否包含字符串。
replace
(布尔值)替换包含rems的规则,而不是添加回退。mediaQuery
(布尔值)允许在媒体查询中转换px。minPixelValue
(数字)设置要替换的最小像素值。
方案二、 在vue.config.js单独配置
module.exports = {
//编译打包存放的目录默认dist
outputDir: 'dist',
// 如果你不需要使用eslint,把lintOnSave设为false即可
lintOnSave: false,
// 设为false打包时不生成.map文件
productionSourceMap: false,
assetsDir: 'static',
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
// 补全css前缀(解决兼容性)
require("autoprefixer")(),
// 把px单位换算成rem单位
require("postcss-pxtorem")({
rootValue: 32, // 换算的基数(设计图750的根字体为32)
selectorBlackList: [".van", ".my-van"],// 要忽略的选择器并保留为px。
propList: ["*"], //可以从px更改为rem的属性。
minPixelValue: 2 // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
})
]
}
}
},
devServer: {
port: 8080,
// proxy: {/**处理跨域,本地代理转发*/
// '/internal': {
// target: 'http://192.168.2.75:9501/', // 接口域名
// secure: false, // 如果是https接口,需要配置这个参数
// changeOrigin: true, //是否跨域}
// },
// },
}
}
方案三、 在package.json单独配置
{
"name": "projectName",
"version": "0.1.0",
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 32,
"selectorBlackList": [".van",".my-van"],
"propList": ["*"],
"minPixelValue": 2
}
}
},
"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8", "ios >= 8", "android >= 4.0"]
}
需要在main.js文件中引入下面的rem.js文件
import '.utils/rem.js'
rem.js文件
// 宽度示例使用的是平板ipad宽度,可根据不同场景自己定义
(function (win) {
"use strict";
win.resize = {};
var timer = null;
var rem = 12;
var doc = win.document;
var docEl = doc.documentElement;
/**
* 刷新页面REM值
*/
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
// width = width > 768 ? 640 : width;
width = width > 768 ? 768 : width;
rem = width / 7.68;
docEl.style.fontSize = rem + 'px';
}
/**
* 页面缩放或重载时刷新REM
*/
win.addEventListener('resize', function () {
clearTimeout(timer);
timer = setTimeout(refreshRem, 100);
}, false);
win.addEventListener('pageshow', function (e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(refreshRem, 100);
}
}, false);
// 解决font-size过大导致间距不正常,必须指定body字号为12px
if (doc.readyState === 'complete') {
doc.body.style.fontSize = '12px';
} else {
doc.addEventListener('DOMContentLoaded', function (e) {
doc.body.style.fontSize = '12px';
}, false);
}
refreshRem();
/**
* rem to px
* @param d
* @returns {number}
*/
resize.rem2px = function (d) {
console.log('rem2px------', d)
var val = parseFloat(d) * rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
};
/**
* px to rem
* @param d
* @returns {number}
*/
resize.px2rem = function (d) {
console.log('px2rem------', d)
var val = parseFloat(d) / rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
};
})(window);