rem 結合 scss 移動端自適應 初級入門demo

首先說明 本篇 內容 適合初級使用 rem 開發移動端 自適應 公式計算 推導過程， 高手繞路。

  目標尺寸 = rem  *  根字體大小

  Px   =  rem * (html根字體px)

  根字體大小 = 比例值 = 屏幕尺寸寬度／PSD稿尺寸寬度

  目標尺寸 = rem  *  屏幕尺寸寬度／PSD稿尺寸寬度

 

                                                                                                                                     Html跟字體瀏覽器支持 最小 12像素， 避免太小加權 係數 n

                                                                                                                                                                                                                                                                     

                  實際尺寸                                 實際尺寸              屏幕尺寸寬度            實際尺寸                屏幕尺寸寬度 * n            實際尺寸                 屏幕尺寸寬度

目標尺寸 = —————   *   根字體大小  =  ———————  * —————————— =  —————— * ———————————— =  ———————  * ———————————————————————————

                      1                                             1               PSD稿尺寸寬度            1 * n                     psd稿 尺寸寬度                a                    b (儘量讓b值小 這樣字體不會小於12像素)

 

psd稿 尺寸寬度 = a * b;

 

                 實際尺寸            屏幕尺寸寬度

目標尺寸 = —————— * ————————————

                   1                     PSD稿尺寸寬度（640）

以PSD 640像素爲例

 

                       實際尺寸                 屏幕尺寸寬度

目標尺寸 = ———————     *    -------————————

                        100                  6.4 （640=100*6.4）

迴歸開始

目標尺寸 = rem  *  根字體大小

結合前端預編譯工具 scss  生成rem：

@function rem( $px) {

    @return $px*(1/100)*1rem;

}

JS 根據屏幕寬度計算 字體大小：

  //- 設置根元素fontSize~

  (function (doc, win) {

    var _root = doc.documentElement,

          resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';

    function resizeFont () {

      var clientWidth = _root.clientWidth;

      _root.style.fontSize = (clientWidth/6.4) + 'px';

      //console.log('w:' + clientWidth );

    }

    win.addEventListener(resizeEvent, resizeFont, false);

    doc.addEventListener('DOMContentLoaded', resizeFont, false);

  })(document, window);

 

 

--------------------延伸-----------------------------------------------------------------------------------

                   

                           實際尺寸

目標尺寸百分比 =  ————————————————

                        上下文元素元素尺寸

 

反推

                  實際尺寸

Rem  = ——————---------------

                根字體大小

---------------------------------------------------------------------------------------------------------

 

 

完整代碼 連接：

 href="https://github.com/cantianshu/rem-and-scss-demo.git">