有的沒的知識儲備

響應(yīng)式 —— 在css中，針對不同大小的瀏覽器窗口，用不同的方式相應(yīng)更新頁面的樣式。
1inch（英寸） = 25.4mm（毫米） = 6pc（pica，印刷術(shù)語，長度為12points） = 72pt（點） = 96px（像素）

em —— 基準(zhǔn)是 當(dāng)前元素的字號（font-size）大小，實際值取決于在哪個元素上應(yīng)用。

• 基準(zhǔn)是當(dāng)前元素的font-size
• 如果當(dāng)前元素的字號用的是em，那么當(dāng)前元素字號的基準(zhǔn)是其父元素
• 先算出當(dāng)前元素的font-size的像素值，再計算其他使用em作為單位的屬性值大小

rem —— 是根em的縮寫，基準(zhǔn)是根元素的字號大小**

視口viewport —— 瀏覽器窗口中用來渲染頁面的可視區(qū)域，不包括瀏覽器的地址欄、工具欄、狀態(tài)欄等。
相關(guān)單位

• vh ——視口高度的1/100
• vw——視口寬度的1/100
• vmin——視口寬度或者高度較小值的1/100
• vmax——視口官渡或者高度較大值的1/100（橫豎屏?xí)r可以用這兩個值）

flexible源碼解讀

// 立即執(zhí)行函數(shù)，入?yún)⑹莣indow和document
(function flexible (window, document) {
  var docEl = document.documentElement
  // 文檔的root元素
  var dpr = window.devicePixelRatio || 1
  // 獲取設(shè)備的dpr（返回當(dāng)前顯示設(shè)備的物理像素分辨率與css像素分辨率之比），它告訴瀏覽器應(yīng)該使用多少屏幕實際像素來繪制單個css像素，

  // adjust body font size
  // 調(diào)整body標(biāo)簽的fontsize，fontsize = (12 * dpr) + 'px'
  // 設(shè)置默認(rèn)字體大小，默認(rèn)的字體大小繼承自body，如果子元素沒有設(shè)置font-size就繼承父元素設(shè)置的這個默認(rèn)字號（這個地方有個疑問，為什么以12位基準(zhǔn)，是因為瀏覽器的最小顯示的字號是12嗎？）
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  // 設(shè)置根元素的fontsize為clientwidth/10（除以10純粹是為了計算方便）這個地方也可以直接寫10vw（表示可視窗口的寬度的十分之一）
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  // 當(dāng)頁面展示或重新設(shè)置大小的時候，重新對rem的px值進行計算
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

px轉(zhuǎn)rem方法

來做一道應(yīng)用題：
已知屏幕實際寬度為W，設(shè)計稿上的屏幕寬度為w，設(shè)計稿上的某個元素的寬度是x，求這個元素實際寬度X
解：
屏幕實際寬度和屏幕在設(shè)計稿上的寬度比與元素實際寬度和元素在設(shè)計稿上的寬度比是一樣的
即：W / w = X / x
那么 X = W * x / w
也即 X = ( W * x / w ) * ( W / 10 ) * ( 10 / W )
也即 X = x / ( w / 10) * ( W / 10 )
在上面源碼處我們設(shè)定了 var rem = docEl.clientWidth / 10
也即rem = W / 10
則 X = x / ( w / 10) rem
我們已設(shè)計稿中屏幕像素為1080px計算，也就得出下面公式中 base-design-font-size = 1080 / 10 = 108
（太難了，別說高等數(shù)學(xué)了，初中數(shù)學(xué)都已經(jīng)還給老師了......）

/*
*@const 根據(jù)1080p分辨率來設(shè)置比率
**/
$base-design-font-size:108px;

/*
* @Functions
* @description Strip units from $number(去掉數(shù)值后的單位)
* @param $number Include units number(含單位字符的數(shù)值)
* @return pure number(純數(shù)字)
*/
@function __strip-units($number){
  @if type-of($number) == 'number'{
    @return $number/($number*0 +1);
  }
  @warn 'Exception in method __stip-unit : Not a number value: #{$number}';
  @return $number;
}

/*
* @Functions
* @description Convert the px to rem (將實際的設(shè)計尺寸px轉(zhuǎn)為相對的rem)
* @param $origLen 設(shè)計圖上的實際尺寸
* @return rem
*/
@function px2rem($origLen){
  $origLen : __strip-units($origLen);
  $base-design-font-size: __strip-units($base-design-font-size);
  @return #{$origLen/$base-design-font-size}rem;
}