一、rem
rem原理:根據html值而定
可以用外掛程式來進行html的font-size的值的改變
適應外掛程式 flexble.js進行適配
步驟:1:先把html自身所帶的控制視口的meat標籤先刪除
2:引入flexble.js，在head裡面< srcipt src=」路徑」>
3:計算流程:
a:ps量出高度88px
b:88px/100px==0.88rem;
二、grid網格布局
grid布局，針對的是子元素布局。
1:形成乙個網格布局(父元素新增):
display:grid;
2:劃分行和列:
grid-template-columns:
grid-template-rows:
如果是3個值，代表3行或3列，能接受具體的px也能是百分比。
劃分行和列的時候的關鍵字和方法:
a:repeat(重複的次數，重複的值)
b:auto-fill關鍵字(自動填充)
c:fr關鍵字(列寬片段)
d:min，max(最小值最大值)
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:palce-content:;控制整個網格在父元素裡面的對齊方式。
Grid網格布局
前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...
Grid網格布局
flex 布局是軸線布局，只能指定 專案 針對軸線的位置，可以看作是一維布局。grid 布局則是將容器劃分成 行 和 列 產生單元格，然後指定 專案所在 的單元格，可以看作是二維布局。grid 布局遠比 flex 布局強大。可以使用repeat repeat 3,33.33 定義三列，每一列為33....
grid網格布局
1.1 容器和專案 採用網格布局的區域，稱為 容器 container 容器內部採用網格定位的子元素，稱為 專案 item 1.2 行和列 容器裡面的水平區域稱為 行 row 垂直區域稱為 列 column 1.3 單元格 行和列的交叉區域，稱為 單元格 cell 正常情況下，n行和m列會產生n x...