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。也即我們認為的頁面寬度。