vue-cli4实现自适应布局

原理

webpack打包时，通过postcss-pxtorem插件，将原先写的px单位转换成rem，然后通过amfe-flexible插件监听窗口变化，设置根元素得fontSize，实现自适应效果

安装

cnpm i amfe-flexible -S // 需要打包进项目 -S
cnpm i postcss-pxtorem -D // 只需要本地使用 -D

安装完成后，在main.js引入amfe-flexible

配置

在项目vue.config.js增加如下配置，没有此文件则在根目录新建一个即可

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("autoprefixer")({
            // 配置使用 autoprefixer
            overrideBrowserslist: ["last 15 versions"] 
          }),
          require("postcss-pxtorem")({
            rootValue: 100, // 换算的基数
            propList: ["*"],
          //exclude: /node_modules/  //配置无需转换
          })
        ]
      }
    }
  }
};

备注

1. 如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px
2. 忽略转换exclude正则匹配项。插件会转化所有的样式的px。转化第三方ui，例如iview（测试可行）
3. 内联样式无法转换
4. 官网详情配置

web浏览器适应

定义js文件，计算根元素fontSize大小，完成后，在main.js引入该js文件，与amfe-flexible相同

// baseSize 要跟换算的基数一样
let baseSize = 100

function setFontSize () {
  // 页面宽度相对于 1920 缩放
  let scale = (document.documentElement.clientWidth <= 1080 ? 1080 : document.documentElement.clientWidth) / 1920
  // 设置页面根节点字体大小，最高放大比例为2）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setFontSize()

// 监听窗口变化
window.onresize = function () {
  setFontSize()
}