Flex、Grid、媒體查詢實現響應式佈局

本篇文章主要講述使用Flex佈局、Grid佈局以及媒體查詢三種方式來實現響應式佈局。
文章涉及程式碼線上coding地址

效果圖：

文字描述：
螢幕大小不同，展示列數不同，1-5號按照螢幕大小可展示2到4列不等，6號始終獨佔一行

Flex佈局

阮一峰Flex佈局講解

方案1（每一項元素不放大）

1. 將可能會出現在一行的表單項放在一個父級容器內
2. 父級容器設定flex-flow: row wrap;表示橫向排列，空間不足時換行
3. 設定容器內每一項元素的flex: 0 0 420px;(420px為每一項元素的基礎寬度)

flex: 0 0 420px;
等同於
flex-grow: 0;
flex-shrink: 0;
flex-basis: 420px;

優點：

1. 不用寫媒體查詢可實現螢幕變大列數自動變多
2. 展示多行時，行列之間上下能夠對齊

缺點：

當增量空間不足時，右側餘出大量空白，不滿足UI適配規範

方案2（每一項元素放大）

1. 將可能會出現在一行的表單項放在一個父級容器內
2. 父級容器設定flex-flow: row wrap;表示橫向排列，空間不足時換行
3. 設定容器內每一項元素的flex: 1 0 420px;

flex: 1 0 420px;
等同於
flex-grow: 1;
flex-shrink: 0;
flex-basis: 420px;

優點：

1. 不用寫媒體查詢可實現螢幕變大列數自動變多
2. 增量空間不足，不足以容納新列時，其他列自動拉寬

缺點：

1. 展示不下另起一行的列與上一列對應列未對齊（嘗試過不可通過佔位等實現，欄位個數不確定，不好佔位）
   

Grid佈局

阮一峰Grid佈局講解

1. 設定父容器為grid佈局
2. 設定每一列的寬度為自動填充，最小寬度420，最大1fr

display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));

優點

可實現隨螢幕大小變化，列數跟隨變化，並可上下列對齊。

缺點

有相容性問題


如果不考慮相容性問題，可以考慮使用Grid佈局，完美實現

media媒體查詢

1. 將可能會出現在一行的表單項放在一個父級容器內
2. 父級容器設定flex-flow: row wrap;表示橫向排列，空間不足時換行
3. 根據不同的螢幕寬度設定flex: 0 0 50%(兩列)/33%(三列)/25%(四列)

@media screen and (max-width: 1280px) {
    flex: 0 0 50%;
}
@media screen and (min-width: 1281px) and (max-width: 1440px) {
    flex: 0 0 33.33%;
}
@media screen and (min-width: 1441px) {
    flex: 0 0 25%;
}

優點：

1. 相容性強
2. 實現各螢幕大小下展示不同的列數

缺點：

1. 需要寫多個媒體查詢
   

到這裡，三種實現響應式佈局的方式就記錄完了！！每天都要進步一點點！