vue项目移动端适配方案lib-flexible

安装lib-flexible

npm install lib-flexible --save

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

import 'lib-flexible/flexible'

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，并自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size
例如宽度为750px的设计稿，1rem就是75px,设计稿中某个元素宽度为150px,那css中就应该写2rem

为了避免每次都根据设计稿量出来的尺寸去计算成rem，可以使用 postcss（使用插件转换css的工具）插件postcss-px2rem-exclude自动将css中的px转成rem

安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

在项目根目录postcss.config.js中配置

module.exports = {
  "plugins": {
    "autoprefixer": {}, //自动补齐css3前缀
    "postcss-px2rem-exclude": {
      remUnit: 75, //代表 1rem = 75px，方便用于宽度为750的设计稿
      exclude: /node_modules/i
    }
  }
}

现在在css文件中就可以直接写px为单位，打开控制台可以看到px被转成了rem