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

• 2020 年 9 月 28 日
• 筆記
• Flex, Grid, media, 響應式布局, 媒體查詢

本篇文章主要講述使用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. 需要寫多個媒體查詢
   

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