1：形成乙個網格結構(父元素新增)：
display:grid;
2: 劃分行和列
grid-template-columns:
grid-template-rows:
如果是3個值 代表3行或3列 能接受具體的px 也能是百分比
劃分行和列的時候的關鍵字 和 方法:
a: repeat(重複的次數,重複的值)
b: auto-fill關鍵字( 自動填充 )
c: fr關鍵字(列寬片段)
d: minmax(最小值,最大值)
3: grid-gap:20px 30px; 簡寫形式
4: 指定某個專案所在的區域:
grid-template-areas:
'a a a'
'. . b'
'. c c';
注: grid-template-areas 必須和 grid-area共同使用
grid-area放在具體某個專案裡面的,指定專案名稱.
5:指定順序:
grid-auto-flow:row/column
6: 內容在專案裡面的對齊方式:
place-items:
注: 網格內部的內容固定的大小 百分比的時候 左右的對齊方式會產生bug
7: place-content:; 控制整個網格在父元素裡面的對齊方式.
根據html font-size值而定
外掛程式來進行html的font-size的值的改變。
適應外掛程式 flexible.js 進行適配
步驟：1：先把html自身所帶的控制視口的meta標籤 先刪除
2：引入flexible.js
在head標籤裡面3: 計算流程：
a: ps量出高度88px
b: 88px / 100px == .88rem;
rem布局原理
昨天去面試，面試官竟然說他們用 查詢針對不同的螢幕寬度做了9個不同的rem布局，呵呵.eg html div上面例子中div寬度為320，因為他是16乘以根元素的font size的值。每次裝置螢幕寬度變化時，讓根元素的font size變化 320屏寬時，font size 20px,16rem能...
rem布局和hotcss原理分析
rem布局的開源方案hotcss,其原理個人理解如下 手機px 手機頁面寬度 設計稿寬度 設計稿px 手機rem 手機px fontsize 手機頁面寬度 設計稿寬度 設計稿px fontsize 裝置螢幕寬度 設計稿寬度 設計稿px fontsize hotcss對fontsize的設定 root...
Rem布局的原理解析
rem作用於非根元素時，相對於根元素字型大小 rem作用於根元素字型大小時，相對於其出初始字型大小 mdn em作為font size的單位時，其代表父元素的字型大小，em作為其他屬性單位時，代表自身字型大小 mdn 從作用上可以看出,rem可以用來解決等比例縮放問題，也就是響應式問題。而em用來解...