移動端 rem適配方法

時間 2019-11-25

標籤移動 rem 適配方法欄目無線简体版

原文原文鏈接

　　　　　　　　　　　　　　　　　　　　rem適配
一, 網易適配方法
屏幕寬度/設計稿rem寬度=頁面動態font-size值css

  (function(doc, win) {
    var docEl = doc.documentElement;
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    recalc = function() {
      var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
      if(!clientWidth) return;
      docEl.style.fontSize = clientWidth / 7.5 + 'px';
    };
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);

解釋:

這樣就設置好了每一個頁面的根fonts-size，由於rem單位是基於根font-size，所以只要肯定一種設計稿對應手機的換算，其他屏幕尺寸都可自動適配。html

上面咱們得出設計稿換算rem的基準值是100，所以只須要把設計稿上的px值除以100即爲咱們要的rem值。sass

> Px/100=rem，因此100px=1rem,25px=0.25rem

二, 手淘適配方法

　　大名鼎鼎的Flexible

　　引入：直接引用阿里的CDN文件（或下載到本地引入）less

　　<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

　　設定：頁面不要設定。Flexible會自動設定每一個屏幕寬度的根font-size、動態viewport、針對Retina屏作的dpr。

　　換算：假設拿到的設計稿和上述網易的同樣都是750，Flexible會把設計稿分爲10份，能夠理解爲頁面width=10rem，即1rem=75px，因此根font-size（基準值）=75px。以後的css換算rem公式爲:

　　px/75=rem,因此100px=100/75=1.33rem,50px=50/75=0.66rem

換算工具:
　　顯然，能夠看出px與rem的換算由於基準值的不一樣而有些複雜，甚至須要藉助計算器的輔助。在這裏推薦一個換算神器："cssrem"

　　cssrem: 配值設置

　　　　px_to_rem - px轉rem的單位比例，假設拿到設計稿750，基準值是75，此處就設75編輯器

　　　　max_rem_fraction_length - px轉rem的小數部分的最大長度。默認爲6。工具

　　　　available_file_types - 啓用此插件的文件類型。[".css", ".less", ".sass", ".scss"]。flex

(function(doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 32 * (clientWidth / 320) + 'px';
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);