部分响应式布局小结

代码在一个工程中如何做 pc 和 mobile 检测分别使用不同的组件以及样式？【一个目前个人解决的方案，但是项目大的话成本可能会高。更好的做法应该是一套代码根据屏幕大小自适应（类似栅栏布局）】

判断是哪个端

• App.vue 生命周期中通过 isMobile 方法判断是属于哪个端
• 为顶级标签设置命名空间（ css 样式用）
• v-if 切换不同的 router-view ，这里只需要切到入口路由就可以，其它的在路由跳转的时候钩子函数中判断路由路径包不包含 mobile/pc 的 key ，从而判断在 next 的时候要不要拼上 mobile/pc 的文件路径跳转。

App.vue

methods: {
  isMobile() {
    let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
    this.isMobileDevice = flag;
    return flag;
  }
},
mounted() {
  if (this.isMobile()) {
  <!-- 如果是移动端的话需要设置rem -->
    (function(doc, win) {
      let docEl = doc.documentElement;
      let resizeEvt =
        "orientationchange" in window ? "orientationchange" : "resize";
      let recalc = function() {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        <!-- 按照750尺寸设置 -->
        if (clientWidth >= 750) {
          <!-- 100作为基准，100px为1rem -->
          docEl.style.fontSize = "100px";
        } else {
          docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
        }
      };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener("DOMContentLoaded", recalc, false);
    })(document, window);
    <!-- 增加顶级命名空间，用于区分不同端的css作用域 -->
    this.$nextTick(() => {
      window.document
        .getElementsByTagName("body")[0]
        .setAttribute("id", "mobile-web-app");
    });
  } else {
    this.$nextTick(() => {
      window.document
        .getElementsByTagName("body")[0]
        .setAttribute("id", "pc-web-app");
    });
  }
}

pc 和 mobile 两套代码以及样式文件

• 针对定义命名空间 style 标签应该是

#mobile-web-app, #pc-web-app {
  width: 100%;
  #app {
    ....
  }
}