vue2 rem屏幕适配方案

适用于新老项目。项目内px也没关系

• 出现这个基本已经成功99.99%了。项目内写rem就行啦~ 1rem=100px 哦
• 项目里已经写过px了怎么办?没关系有插件！ px2rem

两个方法（写到 app.vue文件里）

• setHtmlFontSize() 计算屏幕宽度（按照标准1920设计图）
• listenWindowResize() 监听屏幕变化

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      resizeTimer: '',
    }
  },
  created() {
    this.setHtmlFontSize()
  },
  mounted() {
    this.listenWindowResize()
  },
  methods: {
    // 设置html px
    setHtmlFontSize() {
      let wWidth = 1920;//按照标准1920设计图
      let whdef = 100 / wWidth // 表示1920的设计图,使用100PX的默认值
      let wW = document.documentElement.clientWidth // 窗口宽度
      let rem = wW * whdef // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
      document.documentElement.style.fontSize = rem + 'px'
      document.body.style.fontSize = '16px'
    },
    //全局监听window发生变化
    listenWindowResize() {
      window.onresize = () => {
        if (this.resizeTimer) {
          window.clearTimeout(this.resizeTimer)
        }
        this.resizeTimer = window.setTimeout(() => {
          this.setHtmlFontSize()
        }, 500)
      }
    },
  },
}
</script>

• 缩放屏幕模拟分辨率变化 这个值改变就完事