移动端h5框架自适应_最佳移动端h5自适应rem适配方案

一、利用lib-flexible、postcss-plugin-px2rem插件 进行移动端rem适配。

1、第一

引入lib-flexible .

安装lib-flexible：　　npm i lib-flexible --save-dev

在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible'，

在index.html中 是否 去掉meta name="viewport" 标签  要看框架具体情况，具体请看第四条，

2、第二

使用postcss-plugin-px2rem自动将css中的px转换成rem(真的是大大提升了我们的工作效率，棒棒的，不用自己去瞎算啊)

安装postcss-plugin-px2rem ：　　npm install postcss-plugin-px2rem --save-dev

3、第三 配置postcss

在根目录下 找到.postcssrc.js文件配置如下：

module.exports = {

"plugins": {

"postcss-import": {},

"postcss-url": {},

// to edit target browsers: use "browserslist" field in package.json

"autoprefixer": {},

"postcss-plugin-px2rem": {

rootValue: 75, //换算基数， 默认1