vue 响应式布局

原理：PC端：监听屏幕尺寸改变根字体大小，使用rem实现元素的大小；移动端使用@media @media (max-width: 800px){ }改变样式

let _this = this //保存this

window.addEventListener("resize", function () { //添加屏幕尺寸监听

      _this.screenWidth = document.body.clientWidth;

      document.documentElement.style.fontSize =  //改变根节点的字体大小，最大30px，最小20px

        30 * (_this.screenWidth / 1920) < 20

          ? 20 + "px"

          : 30 * (_this.screenWidth / 1920) + "px";

    });

    window.addEventListener("load", function () {  //监听页面加载

      _this.screenWidth = document.body.clientWidth;

      console.log(document.body.clientWidth);

      document.documentElement.style.fontSize =

        30 * (_this.screenWidth / 1920) < 20

          ? 20 + "px"

          : 30 * (_this.screenWidth / 1920) + "px";

    });

可以通过获取到的屏幕尺寸控制展示pc元素还是移动端的元素（v-if）