vue + flexible手机端自适应布局

1.安装依赖包

npm install lib-flexible px2rem-loader --save

lib-flexible的作用是根据屏幕尺寸动态设置根节点的font-size。px2rem-loader，用来把px转化为rem，就是我们项目运行到浏览器时,它会把我们写的px转化为rem。

2. 在项目入口文件main.js里引入lib-flexible

import 'lib-flexible/flexible.js'

3.在vue.config.js中配置

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("css")
      .test(/\.css$/)
      .oneOf("vue")
      .resourceQuery(/\?vue/)
      .use("px2rem-loader")
      .loader("px2rem-loader")
      .before('postcss-loader')
      .options({
        // 设计稿宽度 / 10
        remUnit: 75
      });
  },
}

4.运行项目即可。

对了,我用的vue-cli版本是3.12.0.如果这样配置报错了的话,可能是vue-cli版本问题。还要发现个问题,就是在scss语法中不生效，暂时还不知道啥原因。