前言:
我们之前使用的解决移动端适配常用的方法是 媒体查询+rem,em,这种适合小的项目,而且每次rem值计算也太麻烦了点,这里列出现在常用的另一种方法就是:lib-flexible 和 postcss-px2rem-exclude来完美的解决适配问题。
步骤一:安装lib-flexible - 适配插件,自动添加头部 meta
1 安装
npm install lib-flexible --save
2 main.js中
import 'lib-flexible'
lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,
同时会自动设置html的font-size为屏幕宽度除以10,
也就是1rem等于html根节点的font-size。
注意:
1.检查一下html文件的head中,如果有 meta name="viewport"标签,需要将他注释掉,
因为如果有这个标签的话,lib-flexible就会默认使用这个标签。而我们要使用lib-flexible
自己生成的 meta name="viewport"来达到高清适配的效果。
2.因为html的font-size是根据屏幕宽度除以10计算出来的,所以我们需要设置页面的
最大宽度是10rem
看图示:
步骤二:安装postcss-px2rem-exclude- 转换插件,自动把页面style中的px转换为rem(注意js+外部引入的css不能被转换,不希望被转成rem,只要在后面写上注释 /* no*/)
***解决第三方组件样式受影响的问题,在exclude里面忽略node_modules
1 安装
npm install postcss-px2rem-exclude --save
2 配置-根目录下找到 postcss.config.js 这个文件,里面加入内容
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i //这里要忽略,不然第三方引入的组件样式会被影响
}
}
}
看图示:
最后:运行项目 npm run serve
打开以后看控制台,已经转换成rem了
参考资源路径:
https://blog.csdn.net/u012878818/article/details/88190907