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。也即我們認為的頁面寬度。
rem布局原理
昨天去面試，面試官竟然說他們用 查詢針對不同的螢幕寬度做了9個不同的rem布局，呵呵.eg html div上面例子中div寬度為320，因為他是16乘以根元素的font size的值。每次裝置螢幕寬度變化時，讓根元素的font size變化 320屏寬時，font size 20px,16rem能...
grid布局和rem的原理
1 形成乙個網格結構 父元素新增 display grid 2 劃分行和列 grid template columns grid template rows 如果是3個值 代表3行或3列 能接受具體的px 也能是百分比 劃分行和列的時候的關鍵字 和 方法 a repeat 重複的次數,重複的值 b ...
Rem布局的原理解析
rem作用於非根元素時，相對於根元素字型大小 rem作用於根元素字型大小時，相對於其出初始字型大小 mdn em作為font size的單位時，其代表父元素的字型大小，em作為其他屬性單位時，代表自身字型大小 mdn 從作用上可以看出,rem可以用來解決等比例縮放問題，也就是響應式問題。而em用來解...