前端移动端适配使用amfe-flexible和postcss-px2rem

一、安装

npm install amfe-flexible -S
npm install postcss-px2rem -S

postcss-px2rem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据标签的font-size值来计算出结果,1rem=html标签的font-size值

二、第二步引入 lib-flexible

在入口main.js中 引入 lib-flexible
import "amfe-flexible";

注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!!

三、配置postcss-px2rem

vue-cli3 配置
px2rem的配置放在vue-cli3 项目中vue.config.js中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js)
具体配置内容如下:
postcss-pxtorem 在postcss.config.js中配置

module.exports = {
    css: {
        loaderOptions: {
          postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 75
          })
        ]
      }
        }
    }
}

vue-cli2 配置

找到根目录下.postcssrc.js文件
然后里面写

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*', '!border*']
    }
  }
}

propList 表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框,这样不会把边框1px变成1rem

四、使用方法

使用时设计图750px的,那设计图要是300px的宽度,那代码里面写成300px。

不想匹配,也就是不想把px变为rem,可以这样

.nav {
  width: 400px;
  height: 300px;
  background: red;
  border: 1px solid black; /*no*/
}

踩坑
后期,发现自己要用vantUI框架,而当我引入之后,发现所有的组件样式都比样例要小,一开始很是懵逼 后来查询之后发现,原来是因为vantUI的根字体默认大小是37.5,和我们默认设置的75不一样,正好是2倍关系,所以当我们的设计图是750的时候,我们的组件就会看起来是1/2的大小,解决这种问题有三种方法:

1、自己要用vant,设置为37.5,在使用ui的设计图时,用1/2的单位来布局,这种显然是个很鸡肋的办法,简言之:可以但没必要! – 作者君就是用的这种方法

2、不用px2rem-loader和lib-flexible搭配,而是使用:lib-flexible和postcss-pxtorem搭配,因为lib-flexible和postcss-pxtorem里面有一个过滤功能,可以让我们过滤掉以van开头的样式:在引入的postcssrc.js里面设置:

module.exports={
  plugins:{
    'postcss-pxtorem':{
      rootValue:75,
      propList:['*'],
      selectorBlackList:['van','weui','mu'] // 忽略转换正则匹配项
    }
  }
}

3、第三种办法就是使用判断条件,依然是在postcssrc.js里面修改:

const AutoPrefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem");
module.exports = ({ file }) => {
  let remUnit;
  // 判断条件 请自行调整 我使用的是 mand-mobile ui 没有对vant引入进行测试
  //link https://github.com/youzan/vant/issues/1181
  if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
    remUnit = 37.5;
  }else {
    remUnit = 75;
  }
  return {
    plugins: [
      px2rem({ remUnit: remUnit}),
      AutoPrefixer({ browsers: ["last 20 versions", "android >= 4.0"] })
    ]
  };
};

postcss-pxtorem (Star1.5k)postcss-px2rem (Star536)
使用postcss-pxtorem 时的 vue.config.js 配置:

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({//这里是配置项,详见官方文档
                        rootValue : 1, // 换算的基数
                        selectorBlackList  : ['weui','mu'], // 忽略转换正则匹配项
                        propList   : ['*'],
                    }),
                ]
            }
        }
    },
}

使用postcss-px2rem 时的 vue.config.js 配置:

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({ //配置项,详见官方文档
                        remUnit: 30
                    }), // 换算的基数
                ]
            }
        }
    },
}

你可能感兴趣的:(前端开发,插件文档,javascript,vue.js,css)