解决适配问题解决方案

# 适配的解决方案

## 1.js通过transfrom 来实现页面等同放大缩小 ==》亲测有效

const baseWidth = 1920;
// const baseHeight = 100;
const baseHeight = 1080;
let timer = null;
let calcScale = function () {
    let windowInnerWidth = window.innerWidth;
    let windowInnerHeight = window.innerHeight;
    // let ratioW = baseWidth / windowInnerWidth;
    let ratioW = windowInnerWidth / baseWidth;
    // let ratioH = baseHeight / windowInnerHeight;
    let ratioH = windowInnerHeight / baseHeight;
    document.body.style.width = baseWidth + 'px';
    document.body.style.height = baseHeight + 'px';
    // document.body.style.height = (0.6/ratioW*baseHeight) + 'vh';
    document.body.style.transformOrigin = 'left top';
    document.body.style.transform = `scale(${ratioW})`;
}
calcScale();
window.onresize = function () {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(calcScale, 300)
}

## 注意：使用改js页面，或者挂载在全局中，他的子集有固定定位，固定定位会失效，transfrom会干掉固定定位，让他成为绝对定位。

## 2.使用postcss-pxtorem插件与amfe-flexible插件结合

a.安装postcss-pxtorem

$ npm install postcss-pxtorem --save-dev

b.安装amfe-flexible

$ npm i -S  amfe-flexible

c.在main.js中引入amfe-flexible

$ import 'amfe-flexible'
$ import 'amfe-flexible/index.js'

d.在vue.config.js中进行配置

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 37.5, // vant官方使用的是37.5
            selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
          })
        ]
      }
    }
  }
}

或者在.postcssrc.js文件中配置，没有就新建此文件

   module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // rootValue: 37.5,
      rootValue: 192,
      propList: ['*'],
    },
  },
};

## III

a、直接引入

b.在index.html中直接引入

    <script src="<%= BASE_URL %>static/amfe-flexible.js"></script>

## 注意：postcss-pxtorem不支持行内式适配