一、flex布局

優點: 代碼簡單，布局方便
缺點
如果中間有內容，縮到最小就不會在小了
且左右側的寬度變小了

二、父相子絕

優點
結合使用media可以實現響應式布局
缺點
代碼寫法復雜，布局較繁瑣
如果不使用media平分屏幕，寬度小于600的情況下，右側會覆蓋左側

三、grid布局

Flex布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局，
Grid 布局則是將容器劃分成“行"和“列”，產生單元格，然后指定"項目所在”的單元格，可以看作是二維布局
Grid布局遠比 Flex布局強大。(不過存在兼容性問題)
知識點比較多, 學習成本相對較高, 目前兼容性不如flex布局!

屬性

容器屬性

grid-template-columns grid-template-rows

規定公有幾行，幾列，每行，每列寬多少？
grid-template-columns:100px 100px 100px; // 顯示為三列每一列寬度100px
grid-template-columns:repeat(3,100px); //同上
也可以固定格大小，然后優先占滿整個寬度
grid-template-columns: repeat(auto-fill,100px);
.auto-fill，有時，單元格的大小是固定的，但是容器的大小不確定，這個屬性就會自動填充
也可以按份數規定列寬
fr，比例關系，fraction ，意為"片段”，表示某一行或列在總寬度和總高度中占的份數
grid-template-columns:repeat(4,1fr); // 寬度平均分成四等份
grid-template-columns:1fr 2fr 3fr; // 列寬這樣是分成6份各占 1 2 3 份 效果如下圖
還可以設置最小和最大的大小范圍:
grid-template-columns: 1fr minmax(150px，1fr); // 第一個參數最小值,第二個最大值,表示第二列最小150px，最大1fr。
還可以請瀏覽器自己決定長度
auto，表示由瀏覽器自己決定長度
grid-template-columns: 100px auto 100px;
還可以定義網格線
網格線．可以用方括號定義網格線名稱，方便以后給盒子定位使用
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];

column-gap和row-gap

定義格與格之間的間距
如果column-gap和row-gap間距一致，可簡寫為: gap:xxx

grid-auto-flow

劃分網格以后，容器的子元素會按照順序，自動放置在每一個網格。默認的放置順序是"先行后列".即先填滿第一行，再開始放入第二行(就是子元素的排放順序)
grid-auto-flow： row 先行后列
grid-auto-flow： column 先列后行

justify-items(水平方向)/ align-items(垂直方向)

設置單元格內容的水平和垂直的對齊方式
值為: start | end | center | stretch
同時設置兩個屬性: 簡寫 place-items : start end； 這是兩個屬性的簡寫

justify-content (水平方向)/ align-content(垂直方向)

設置整個內容區域（所有的項目的總和）的水平和垂直的對齊方式
取值: start | end | center | stretch | space-around | space-between | space-evenly;

項目屬性

grid-column-start / grid-column-end grid-row-start / grid-row-end

一句話解釋，用來指定item的具體位置，根據在哪根網格線
grid-column-start:1;
grid-column-end:3;
表示從第一個網格線，跨到第三個網格線之前，也就是橫跨1、2兩列
grid-column: span 2;
grid-column-end:3;
簡寫: grid-column: 1 / 3;
grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;
跨兩行，跨兩列的方形區域
簡寫: grid-area: 1 / 1 / 3 / 3

justify-self / align-self

當前單元格內容的水平和垂直對齊方向
place-self
同時設置一個單元格內容的水平和垂直方向對齊方式

https://www.jianshu.com/p/3762f214cd6f

四、float布局

容易被擠壓換行

五、使用rem作單位，等比縮放

首先，給根元素html設置一個字體大小
然后，其他尺寸單位全部用 rem
然后，監聽屏幕的大小
然后，根據屏幕的大小按比例改變根節點字體的大小
因為 rem 的特性，其他的尺寸都是根據根節點字體的大小設定的，所以，根節點字體大小一變，其他所有尺寸都會按比例變大、或小。
大部分瀏覽器的字體有個最小值：12px。也就是縮小到 12px 后，字體不會繼續縮小。

總結

以上是生活随笔為你收集整理的5种响应式布局方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。