vue项目pc端页面适配

pc端适配包括不同分辨率的适配以及放大缩小网页的适配。

适配方法如下：

1、rem适配。（依据网页根节点字体大小

根据ui设计稿计算缩放比（以1920*1080为例，顶部标题字体大小为25px）

<style lang="scss" scoped>
//1920*1080为设计稿，头部字体大小为25px
$ratio: 1920 / 76.8; // 缩放比   25

// 返回对应屏幕下的rem值
@function px2rem($px) {
  @return $px / $ratio + rem;
}

</style>

在具体使用时直接调用函数，比如设计稿高为100px，则height:px2rem(100)，即转化为相应的rem。

页面加载时设置页面默认根节点大小，监听页面变化时重设根节点字体大小。

created() {
    // 获取当前设备的宽度，设置rem的根字体大小
    let width = window.innerWidth;
    width = width <= 1200 ? 1200 : width;
    const htmlObj = document.getElementsByTagName("html")[0];
    htmlObj.style.fontSize = width / 76.8 + "px";

    // 对resize事件进行浏览器兼容处理
    if (document.createEvent) {
      var event = document.createEvent("HTMLEvents");
      event.initEvent("resize", true, true);
      window.dispatchEvent(event);
    } else if (document.createEventObject) {
      window.fireEvent("onresize");
    }

    // 监听页面resize事件，重新设置rem的根字体大小
    window.onresize = function () {
      let width = window.innerWidth;
      width = width <= 1200 ? 1200 : width;
      htmlObj.style.fontSize = width / 76.8 + "px";
    };
  },

如果只有当前页面使用，最后在切换页面是要清除数据。

destroyed() {
    const htmlObj = document.getElementsByTagName("html")[0];
    htmlObj.style.fontSize = "";
    window.onresize = null;
  },