一、项目中安装lib-flexible
npm install lib-flexible --save
二、在项目的入口main.js文件中引入lib-flexible
import 'lib-flexible' // 默认将屏幕划分为10等分 (如果设计稿尺寸为1920px, 则 1rem = (1920/10)px;偏大,可以设置24等分,则1rem = (1920/24)px=80px;
第二部分:使用postcss-px2rem-exclude自动将css中的px转换成rem
安装postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
配置exclude选项
配置位置是项目根目录下的postcss.config.js文件,如果你的项目没有生成这个独立文件,就需要在你的package.json里设置。
postcss.config.js
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
};
package.json
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem-exclude":{
"remUnit": 75,
"exclude":"/node_modules|floder_name/i"
}
}
},
PC端大屏设置时要修改flexible.js 为
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr; // //当屏幕宽度超过540的时候我们应该以实际宽度重新计算,从而来做到适应PC
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}