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布局來進行適配。