前期知識點準(zhǔn)備

• devicePixelRatio

  Window 接口的devicePixelRatio返回當(dāng)前顯示設(shè)備的物理像素分辨率與CSS像素分辨率之比贾费。 此值也可以解釋為像素大小的比率：一個CSS像素的大小與一個物理像素的大小眶掌。 簡單來說骗绕，它告訴瀏覽器應(yīng)使用多少屏幕實際像素來繪制單個CSS像素。     
  

• viewport

  視口是用戶在網(wǎng)頁上的可見區(qū)域盖矫。
  視口隨設(shè)備而異庭敦，并且在移動電話上的視口會比在計算機屏幕上的視口小。
  在平板電腦和手機之前诅需，網(wǎng)頁僅設(shè)計用于計算機屏幕，并且網(wǎng)頁具有靜態(tài)設(shè)計和固定大小是很常見的荧库。
  然后堰塌，當(dāng)我們開始使用平板電腦和手機上網(wǎng)時，固定大小的網(wǎng)頁太大了分衫，無法容納視口场刑。要解決此問題，這些設(shè)備上的瀏覽器會按比例縮小整個網(wǎng)頁以適合屏幕大小蚪战。
  

代碼分析

// 主要代碼牵现，設(shè)置html根節(jié)點的大小，rem根據(jù)根節(jié)點fontsizize的大小來進行動態(tài)變化屎勘。
     var docEl = document.documentElement
     var dpr = window.devicePixelRatio || 1
  
   // set 1rem = viewWidth / 10
// 為什么要 viewWidth / 10施籍，主要是進行劃分比例居扒，后面根據(jù)設(shè)計圖編寫的時候可以進行按照這個來進行縮放概漱，那么 viewWidth / 20 可不可以 當(dāng)然可以。
        function setRemUnit() {
            var rem = docEl.clientWidth / 10
            docEl.style.fontSize = rem + 'px'
        }

        setRemUnit()

// 主要檢測瀏覽器是否支持hairline
      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)
        }

3. 如何使用

   安裝的話移步這邊文章

   可以在sass里面編寫一步到位的sass函數(shù)喜喂，這樣會在編寫時候直接粘貼設(shè)計圖上面的像素

   /*
   * 根據(jù)1080p分辨率來設(shè)置比率
   **/
   $base-design-font-size:108px;
   
   /*
   * @Functions
   * @description 去掉數(shù)值后的單位
   * @param 含單位字符的數(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;
   }
   
   /*
   * @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;
   }