<template>
  <div id="app">
      <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    //窗口尺寸改變
    window.onresize = () => {
      return (() => {
        // this.$forceUpdate();//強(qiáng)制更新數(shù)據(jù)
        this.$router.go(0);
      })();
    };
  },
  methods: {},
  destroyed() {
    // 銷毀
    window.onresize = null;
  },
};
</script>

<template>
  <div id="app">
      <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    //窗口尺寸改變
    window.addEventListener("resize", () => this.Refresh());
  },
  methods: {
	Refresh() {
      this.$router.go(0);
    },
  },
  destroyed() {
    // 銷毀
    window.removeEventListener("resize", this.Refresh());
  },
};
</script>

npm install postcss-px2rem px2rem-loader --save

// rem等比適配配置文件
// 基準(zhǔn)大小
const baseSize = 16
// 設(shè)置 rem 函數(shù)
function setRem () {
  // 當(dāng)前頁(yè)面寬度相對(duì)于 1920寬的縮放比例，可根據(jù)自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 設(shè)置頁(yè)面根節(jié)點(diǎn)字體大?。ā癕ath.min(scale, 2)” 指最高放大比例為2，可根據(jù)實(shí)際業(yè)務(wù)需求調(diào)整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
  setRem()
}

import './util/pxtorem'

// 引入等比適配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
? // 基準(zhǔn)大小 baseSize，需要和rem.js中相同
? remUnit: 16
})
// 使用等比適配插件
module.exports = {
? lintOnSave: true,
? css: {
? ? loaderOptions: {
? ? ? postcss: {
? ? ? ? plugins: [
? ? ? ? ? postcss
? ? ? ? ]
? ? ? }
? ? }
? }
}

<template>
  <div id="app">
    <div ref="newCatalog" class="newCatalog">
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      scale: ''
    }
  },
  mounted() {
    this.setScale()
    window.addEventListener('resize', this.setScale)
  },
  methods: {
    getScale() {
      const width = window.screen.width
      const height = window.screen.height
      let ww = window.innerWidth / 1920
      let wh = window.innerHeight / 1080
      return ww < wh ? ww : wh
    },
    setScale() {
      this.scale = this.getScale()
      this.$refs.newCatalog.style.setProperty('--scale', this.scale)
    }
  }
}
</script>
<style lang="scss">
@import '~style/init.scss';
#app {
  width: 100vw;
  height: 100vh;
  font-family: Alibaba-PuHuiTi-R, Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background: url('~assets/images/bg.png');
  background-size: cover;
}
.newCatalog {
  --scale: 1;
  width: 1920px;
  height: 1080px;
  background-size: 100% 100%;
  position: absolute;
  transform: scale(var(--scale)) translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
}
</style>

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 需要轉(zhuǎn)換的單位，默認(rèn)為"px"
      viewportWidth: 1920, // 設(shè)計(jì)稿的視口寬度
      unitPrecision: 5, // 單位轉(zhuǎn)換后保留的精度
      propList: ['*'], // 能轉(zhuǎn)化為vw的屬性列表
      viewportUnit: 'vw', // 希望使用的視口單位
      fontViewportUnit: 'vw', // 字體使用的視口單位
      selectorBlackList: [], // 需要忽略的CSS選擇器，不會(huì)轉(zhuǎn)為視口單位，使用原有的px等單位。
      minPixelValue: 1, // 設(shè)置最小的轉(zhuǎn)換數(shù)值，如果為1的話，只有大于1的值會(huì)被轉(zhuǎn)換
      mediaQuery: false, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位
      replace: true, //  是否直接更換屬性值，而不添加備用屬性
      exclude: [/node_modules/, /LargeScreen/], // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件,數(shù)組中寫正則
      include: undefined, // 如果設(shè)置了include，那將只有匹配到的文件才會(huì)被轉(zhuǎn)換
      landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
      landscapeUnit: 'vw', // 橫屏?xí)r使用的單位
      landscapeWidth: 1920, // 橫屏?xí)r使用的視口寬度
    },
  },
};