原文:http://www.cnblogs.com/skylineStar/p/10036525.html
一、项目中安装lib-flexible
npm install lib-flexible -S
二、在项目的入口main.js文件中引入lib-flexible
import 'lib-flexible'
第二部分:使用postcss-px2rem自动将css中的px转换成rem
一、安装postcss-px2rem
npm install postcss-px2rem -S
二、项目配置postcss
项目开始我是在vue.config.js(项目创建完初始是没有这个js文件的,需要自己手动创建)中配置的,上代码
module.exports = {
css: {
loaderOptions: {
postcss: {
// 这是rem适配的配置 注意: remUnit在这里要根据lib-flexible的规则来配制,如果您的设计稿是750px的,用75就刚刚好。
plugins: [
require("postcss-px2rem")({
remUnit: 75
})
]
}
}
}
或者
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" } } },
index.html
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
参考这2个博客
https://blog.csdn.net/qq_31393401/article/details/82354879
https://blog.csdn.net/qq_31393401/article/details/82353267