本篇文章主要講述使用Flex布局、Grid布局以及媒體查詢?nèi)N方式來(lái)實(shí)現(xiàn)響應(yīng)式布局。
文章涉及代碼在線coding地址
效果圖：
效果圖.png
文字描述：
屏幕大小不同，展示列數(shù)不同，1-5號(hào)按照屏幕大小可展示2到4列不等，6號(hào)始終獨(dú)占一行
Flex布局
方案1（每一項(xiàng)元素不放大）
- 將可能會(huì)出現(xiàn)在一行的表單項(xiàng)放在一個(gè)父級(jí)容器內(nèi)
- 父級(jí)容器設(shè)置flex-flow: row wrap;表示橫向排列，空間不足時(shí)換行
- 設(shè)置容器內(nèi)每一項(xiàng)元素的flex: 0 0 420px;(420px為每一項(xiàng)元素的基礎(chǔ)寬度)
flex: 0 0 420px;
等同于
flex-grow: 0;
flex-shrink: 0;
flex-basis: 420px;
優(yōu)點(diǎn)：
- 不用寫媒體查詢可實(shí)現(xiàn)屏幕變大列數(shù)自動(dòng)變多
- 展示多行時(shí)，行列之間上下能夠?qū)R
缺點(diǎn)：
當(dāng)增量空間不足時(shí)，右側(cè)余出大量空白，不滿足UI適配規(guī)范
Flex方案1.png
方案2（每一項(xiàng)元素放大）
- 將可能會(huì)出現(xiàn)在一行的表單項(xiàng)放在一個(gè)父級(jí)容器內(nèi)
- 父級(jí)容器設(shè)置flex-flow: row wrap;表示橫向排列，空間不足時(shí)換行
- 設(shè)置容器內(nèi)每一項(xiàng)元素的flex: 1 0 420px;
flex: 1 0 420px;
等同于
flex-grow: 1;
flex-shrink: 0;
flex-basis: 420px;
優(yōu)點(diǎn)：
- 不用寫媒體查詢可實(shí)現(xiàn)屏幕變大列數(shù)自動(dòng)變多
- 增量空間不足，不足以容納新列時(shí)，其他列自動(dòng)拉寬
缺點(diǎn)：
-
展示不下另起一行的列與上一列對(duì)應(yīng)列未對(duì)齊（嘗試過(guò)不可通過(guò)占位等實(shí)現(xiàn)，字段個(gè)數(shù)不確定，不好占位）
Flex方案2.png
Grid布局
- 設(shè)置父容器為grid布局
- 設(shè)置每一列的寬度為自動(dòng)填充，最小寬度420，最大1fr
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
優(yōu)點(diǎn)
可實(shí)現(xiàn)隨屏幕大小變化，列數(shù)跟隨變化，并可上下列對(duì)齊。
缺點(diǎn)
有兼容性問(wèn)題
Grid兼容性.png
Grid布局.png
如果不考慮兼容性問(wèn)題，可以考慮使用Grid布局，完美實(shí)現(xiàn)
media媒體查詢
- 將可能會(huì)出現(xiàn)在一行的表單項(xiàng)放在一個(gè)父級(jí)容器內(nèi)
- 父級(jí)容器設(shè)置flex-flow: row wrap;表示橫向排列，空間不足時(shí)換行
- 根據(jù)不同的屏幕寬度設(shè)置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%;
}
優(yōu)點(diǎn)：
- 兼容性強(qiáng)
- 實(shí)現(xiàn)各屏幕大小下展示不同的列數(shù)
缺點(diǎn)：
-
需要寫多個(gè)媒體查詢
媒體查詢.png
到這里，三種實(shí)現(xiàn)響應(yīng)式布局的方式就記錄完了??！每天都要進(jìn)步一點(diǎn)點(diǎn)！
