移动端适配 amfe-flexible

1. 介绍

基于 rem 的移动端适配方案

源代码 按设计稿的尺寸编写样式

编译后自动转化为 rem 并自动设置 根元素 的 font-size

2. 使用

安装：

npm i amfe-flexible
npm i -D postcss-pxtorem

使用：

• main.js: （注意！！！！！！）

  import 'amfe-flexible';
  

• postcss.config.js:

  const autoprefixer = require('autoprefixer');
  const px2rem = require('postcss-pxtorem');
  
  module.exports = {
    plugins: [autoprefixer(),
      px2rem({
        // 设计稿宽度的 十分之一
        rootValue: 192,
        unitPrecision: 5,
        propList: ['*'],
        selectorBlackList: ['no-rem'],
        exclude: /node_modules/,
      }),
    ],
  };
  

2.1. 不想匹配

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

.nav {
  border: 1px solid black; /*no*/
}

3. 参考

• vue中使用amfe-flexible和postcss-pxtorem结合实现移动端适配方案 (opens new window)
• postcss-adaptive (opens new window)