rem佈局和hotcss原理分析

看風景就發表於2017-01-12

rem佈局的開源方案hotcss, 其原理個人理解如下:

 

手機px = (手機頁面寬度/設計稿寬度) * 設計稿px 

手機rem = 手機px / fontSize 

            = (手機頁面寬度/設計稿寬度) * 設計稿px / fontSize

     = (裝置螢幕寬度/設計稿寬度) * 設計稿px / fontSize

hotcss對fontSize的設定

root fontSize = (裝置螢幕寬度/320) * 20 = 裝置螢幕寬度/16, 將頁面16等分,1rem = 1/16 裝置寬度

於是

手機rem = (裝置螢幕寬度/設計稿寬度) * 設計稿px / ((裝置螢幕寬度/320) * 20)
            = 設計稿px * 320 /設計稿寬度/20  = 設計稿px / (設計稿寬度/16)

手機rem可以理解為一個比率,就是設計稿px佔設計稿寬度1/16的比率,此比率應該與手機px佔手機螢幕寬度1/16的比率相等,即是手機的rem

hotcss對viewport的設定

scale = 1/dpr

viewport = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no'

於是

手機px 變為 手機px/dpr

得到真實的1px

 

其中320和20,作者的解釋如下, 本人無法理解

1. 16rem。相當於設計稿的100%。
2. 320是認為頁面是320畫素。
3. 20是每份的的寬度。因為10px在某些瀏覽器無法顯示(最小12px)所以選擇了每份20。
4. 據此可推斷,16份即為320px。也即我們認為的頁面寬度。

相關文章