1. 程式人生 > >移動端布局 rem

移動端布局 rem

屏幕 size ear rem pre wsize initial onchange width

/*
    # 按照寬高比例設定html字體, width=device-width initial-scale=1版
    # @pargam win 窗口window對象
    # @pargam option{
      designWidth: 設計稿寬度,必須
      designHeight: 設計稿高度,不傳的話則比例按照寬度來計算,可選
      designFontSize: 設計稿寬高下用於計算的字體大小,默認20,可選
      callback: 字體計算之後的回調函數,可選
    }
    # return Boolean;
    # ps:請盡量第一時間運行此js計算字體
*/
!function (win, option) {
  var count = 0, 
      designWidth = option.designWidth, 
      designHeight = option.designHeight || 0, 
      designFontSize = option.designFontSize || 20, 
      callback = option.callback || null,
      root = document.documentElement,
      body = document.body,
      rootWidth, newSize, t, self;
  //返回root元素字體計算結果
  function _getNewFontSize() {
    var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth;
    return parseInt( scale * 10000 * designFontSize ) / 10000;
  }
  !function () {
    rootWidth = root.getBoundingClientRect().width;
    self = self ? self : arguments.callee;
    //如果此時屏幕寬度不準確,就嘗試再次獲取分辨率,只嘗試20次,否則使用win.innerWidth計算
    if( rootWidth !== win.innerWidth &&  count < 20 ) {
      win.setTimeout(function () {
        count++;
        self();
      }, 0);
    } else {
      newSize = _getNewFontSize();
      //如果css已經兼容當前分辨率就不管了
      if( newSize + ‘px‘ !== getComputedStyle(root)[‘font-size‘] ) {
        root.style.fontSize = newSize + "px";
        return callback && callback(newSize);
      };
    };
  }();
  //橫豎屏切換的時候改變fontSize,根據需要選擇使用
  win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    clearTimeout(t);
    t = setTimeout(function () {
      self();
    }, 200);
  }, false);
}(window, {
    designWidth: 750, 
//  designHeight: 960,
  designFontSize: 100,
  callback: function (argument) {
    //console.log(argument)
  }
});

  

移動端布局 rem