pc端页面适配思路

对于pc端网页的适配，笔者大体的适配方法就是在整体布局div时，尽量让width、height都使用百分比方式，而对于内部div，以及元素之间的margin、padding、width、height等属性，使用rem来进行适配。直接贴代码说明原理。

let designSize = 1920; // 定义设计图大小，就是最终要适配的屏幕宽度
let html = document.documentElement;
let wW = html.clientWidth; // 获取自己的浏览器窗口宽度
let rem = wW * 100 / designSize / 8; // 进行rem的换算，因为在实际展示中，在不同的尺寸的屏幕上design的宽度是变化的，所以rem是一个动态变化的值，比如当前ww是1536（14寸笔记本屏幕大小），所以此时1rem就是10px，而到宽度为1920的屏幕上，此时rem就是12.5px，就会实现宽高自适应。
document.documentElement.style.fontSize = rem + 'px';  // 让根元素字体大小值变为相应rem值的大小

整体思路便是这样，而要让页面渲染完成之前就要准备好这些配置，则需要一个立即执行函数，完整代码如下：

  ;
  (function(win) {
    var tid;

    function refreshRem() {
      let designSize = 1920; // 设计图尺寸
      let html = document.documentElement;
      let wW = html.clientWidth; // 窗口宽度
      let rem = wW * 100 / designSize / 8;
      document.documentElement.style.fontSize = rem + 'px';
    }

    win.addEventListener('resize', function() {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
      if (e.persisted) {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
      }
    }, false);

    refreshRem();

  })(window);

这个适配方法其实只能用于一些简单页面的适配，在一些复杂的，要求适配程度较高的页面上还要结合flex布局来进行适配。