當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Web自适应布局你需要知道的所有事儿

發(fā)布時(shí)間：2025/3/8 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web自适应布局你需要知道的所有事儿小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

有這樣一個(gè)問題。

請(qǐng)說說你知道的所有web布局方式？

一般來說，有以下這些布局方法：

浮動(dòng) float:left|right

inline-block display:inline-block

flexible box display:flex

grid display:grid

絕對(duì)、相對(duì)定位 position:absolute|relative

表格 <table>或display:table

使用框架布局 bootstrap、Pure.css等

有小伙伴就要說，這也太多了吧，我應(yīng)該怎么選擇？

別急，下面我們就開始逐一分析各種方法在web自適應(yīng)布局下的使用姿勢(shì)，最后做個(gè)總結(jié)。

本文的所有例子使用了同一種三欄布局。源代碼點(diǎn)我

大尺寸 width > 1024px
中尺寸 768px < width < 1024px
小尺寸 width < 768px

1. 浮動(dòng)布局 float:left|right

最常用的布局方式之一，設(shè)置了float的元素脫離了文檔流。需要注意在使用過浮動(dòng)后，需要清除浮動(dòng)，從而避免影響后面的非浮動(dòng)元素。

HTML

<div class="rwd-header">Header</div> <div class="rwd-content"><div class="rwd-content-left">Left</div><div class="rwd-content-body"><div class="rwd-content-bodyTop">Top Content</div><div class="rwd-content-bodyBottom">Bottom Content</div></div><div class="rwd-content-right">Right</div> </div> <div class="rwd-footer">Footer</div> 復(fù)制代碼

普通的html布局，一個(gè)header，一個(gè)footer，中間是三欄式布局。

關(guān)鍵css

.rwd-content-left, .rwd-content-body, .rwd-content-right {float: left; } 復(fù)制代碼

給中間的三欄都設(shè)上浮動(dòng)。

.rwd-content::after {content: "";clear: both;display: block; } 復(fù)制代碼

清除浮動(dòng)

.rwd-content-left {width: 20%;height: 200px; }.rwd-content-body {width: 60%; }.rwd-content-right {height: 300px;width: 20%; } 復(fù)制代碼

元素的寬度都是百分比。因?yàn)闆]有內(nèi)容高度給死了，日常應(yīng)用時(shí)多用auto，讓里面的內(nèi)容撐開高度。

@media查詢

當(dāng)@media的查詢條件滿足時(shí)，應(yīng)用{}中的樣式。

screen就是指電腦屏幕，還有print指打印頁面。 MDN @media

@media做的事完全可以用javascript代替，用js添加一個(gè)class或者直接用js修改css屬性。優(yōu)點(diǎn)是瀏覽器全兼容，缺點(diǎn)就是用了js。

@media only screen and (max-width: 1024px) {.rwd-content-left {width: 30%;}.rwd-content-body {width: 70%;}.rwd-content-right {width: 100%;} }@media only screen and (max-width: 768px) {[class*="rwd-content-"] {width: 100%;} } 復(fù)制代碼

中尺寸屏幕要把right擠下去，只要讓left和content加起來等于100%，后面的東西就自動(dòng)換行了。

小尺寸用了css選擇器，把所有rwd-content-開頭的class寬度都設(shè)成100%。

親自試一試

2. inline-block display:inline-block

HTML

html和浮動(dòng)布局的一樣，為了避免空白字符壓縮（white space collapse）的問題，寫法略有變化。

關(guān)鍵css

.rwd-content-left, .rwd-content-body, .rwd-content-right {display: inline-block;vertical-align: top; } 復(fù)制代碼

對(duì)我們這個(gè)布局，只是把float:left改成這兩句。

自適應(yīng)的代碼也和float一樣，不重復(fù)貼了。

親自試一試

Float vs. Inline-block

兩者都是很常用的布局方式。

如果需要垂直居中，使用inline-block。
inline-block有空白字符壓縮的問題。
使用float，注意要清除浮動(dòng)。
沒有特別推薦用哪種，看個(gè)人習(xí)慣。

如何調(diào)整float或inline-block布局中元素的順序？

比如我在小尺寸的時(shí)候，想把content放最上面，left和right都擠下去，怎么做呢？

float和inline-block布局沒有純css的方法，要用js把dom扣出來，往后面放，flexbox和grid布局都可以很好地解決這個(gè)問題。

3. flexible box display:flex

HTML

html還是一樣。

看css前先說說flex基礎(chǔ)。

* flexbox兩分鐘不完全指北

flexbox布局說白了就是點(diǎn)菜。先想好要吃什么，然后點(diǎn)必選菜，最后點(diǎn)可選菜，愛點(diǎn)不點(diǎn)。

先想要吃什么，還是用之前的例子。header和footer不用管，需要布局一個(gè)這樣的東西：

然后點(diǎn)必選菜，有下面幾個(gè)必選菜要點(diǎn)：

1). flex-direction, 選水平方向從左到右，選flex-direction: row

.container {flex-direction: row | row-reverse | column | column-reverse; } 復(fù)制代碼

2). flex-wrap，我們是單行布局，不要換行，選flex-wrap: nowrap

.container{flex-wrap: nowrap | wrap | wrap-reverse; } 復(fù)制代碼

3). justify-content，如果水平方向有空間，怎么分配，選space-between

.container {justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; } 復(fù)制代碼

4). 垂直方向怎么布局，選align-items: flex-start

.container {align-items: flex-start | flex-end | center | baseline | stretch; } 復(fù)制代碼

5). align-content，多行布局怎么分配空間，我們是單行布局，不存在的

.container {align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 復(fù)制代碼

選好這5個(gè)之后，再加上display: flex;，往flex容器上一寫，就完事了。

可以偷懶的地方: 上面5種屬性，第一個(gè)值是默認(rèn)值，如果選了第一個(gè)，這個(gè)屬性可以不用寫。

最后的可選菜比較常用的是可以調(diào)整flex子項(xiàng)(flex item)的順序(order)，單獨(dú)改變某個(gè)子項(xiàng)的布局等。

詳細(xì)教程點(diǎn)這里： flexbox中文教程^[1]A Guide to Flexbox^[2]

關(guān)鍵css

.rwd-content {display: flex;justify-content: space-between;align-items: flex-start; } 復(fù)制代碼

flex容器(container)屬性如前文所說。

@media only screen and (max-width: 1024px) {.rwd-content {flex-wrap: wrap;}.rwd-content-left {width: 30%;}.rwd-content-body {width: 70%;}.rwd-content-right {width: 100%;} }@media only screen and (max-width: 768px) {[class*="rwd-content-"] {width: 100%;} } 復(fù)制代碼

自適應(yīng)布局時(shí)，設(shè)flex-wrap: wrap;，其他一樣。

親自試一試

Flexbox vs. Float/Inline-block

如果瀏覽器沒問題，flexbox可以替代（或者替代大多數(shù)）float和inline-block。
相比float，flexbox解決了垂直居中的問題。
相比float/inline-block，flexbox多了垂直布局的方式，可以使容器中的內(nèi)容等高，還可以改變內(nèi)容的順序。
flexbox就像名字一樣，非常靈活，同一種布局都可以用多種方式實(shí)現(xiàn)。
flexbox的缺點(diǎn)是需要記的屬性比較多，小部分瀏覽器支持不好。

Can I use flex ?

4. grid布局 display:grid

HTML

<div class="rwd-grid"><div class="rwd-header">Header</div><div class="rwd-content-left">Left</div><div class="rwd-content-bodyTop">Top Content</div><div class="rwd-content-bodyBottom">Bottom Content</div><div class="rwd-content-right">Right</div><div class="rwd-footer">Footer</div> </div> 復(fù)制代碼

grid的特點(diǎn)就是為所欲為，dom的順序無所謂，只要放在grid容器下就可以。

看css之前還是先說說grid基礎(chǔ)。

* grid兩分鐘+兩分鐘不完全指北

2個(gè)兩分鐘因?yàn)橐话鉭rid有兩種使用方式：

1). 網(wǎng)格項(xiàng)(grid item)起個(gè)名字，在網(wǎng)格容器（grid container）上定義好網(wǎng)格布局并且通過名字指定好所有網(wǎng)格項(xiàng)的位置。

2). 網(wǎng)格容器只定義布局，每個(gè)網(wǎng)格項(xiàng)在使用的時(shí)候，自行選擇放到哪個(gè)(或哪幾個(gè))網(wǎng)格中。

不管哪種方式，只要會(huì)劃線，你就掌握了grid布局。把想要的布局畫出來，然后用線分割開。

橫向1 ～ 7的黑線和縱向1) ～ 4)的紅線都叫網(wǎng)格線。

網(wǎng)格線包圍的一個(gè)或多塊矩形區(qū)域叫網(wǎng)格區(qū)塊。

第一種grid布局方式:

.rwd-grid {display: grid;grid-gap: 5px;width: 100%;grid-template-areas: "header header header""left top right""left bottom right"". bottom right"". bottom .""footer footer footer";grid-template-rows: 80px 150px 50px 100px 100px 100px;grid-template-columns: 20% 60% 20%; }.rwd-header {grid-area: header; } .rwd-content-left {grid-area: left; } .rwd-content-bodyTop {grid-area: top; } .rwd-content-bodyBottom {grid-area: bottom; } .rwd-content-right {grid-area: right; } .rwd-footer {grid-area: footer; } 復(fù)制代碼

網(wǎng)格項(xiàng)(grid item)用grid-area屬性起個(gè)名字。

網(wǎng)格容器(grid container)上三個(gè)主要屬性要設(shè)置：

grid-template-areas: 就是一張地圖，和我們劃線分割的圖布局一樣，.表示空白。

grid-template-rows: 設(shè)置行上的高度，不設(shè)置的話為auto。除了固定數(shù)字，百分比還有fr。 grid-template-rows: repeat(3, 1fr)就是三等分的意思。

grid-template-columns: 設(shè)置列的寬度。

自適應(yīng)布局就是重畫地圖。

@media only screen and (max-width: 1024px) {.rwd-grid {grid-template-areas: "header header""left top""left bottom"". bottom""right right""footer footer";grid-template-rows: 80px 150px 50px 200px 100px 100px;grid-template-columns: 30% 70%;} }@media only screen and (max-width: 768px) {.rwd-grid {grid-template-areas: "header""left""top""bottom""right""footer";grid-template-rows: 80px 200px 150px 250px 100px 100px;grid-template-columns: 100%;} } 復(fù)制代碼

親自試一試1

第二種grid布局方式:

.rwd-grid {display: grid;grid-gap: 5px;margin: 5px 0;width: 100%;grid-template-rows: 80px 150px 50px repeat(3, 100px);grid-template-columns: 20% 60% 20%; } 復(fù)制代碼

網(wǎng)格容器上只要設(shè)置grid-template-rows和grid-template-columns。網(wǎng)格項(xiàng)在用的時(shí)候，自行設(shè)置需要放的地方。有很多種設(shè)置方式。

.rwd-header {grid-column-start: 1;grid-column-end: 4;grid-row-start: 1;grid-row-end: 2; } 復(fù)制代碼

四個(gè)屬性，分別是行、列的開始和結(jié)束。這邊的序號(hào)指的是網(wǎng)格線，參照之前圖中橫向的黑色網(wǎng)格線和縱向的紅色網(wǎng)格線。

參照?qǐng)D，應(yīng)該好理解。

相當(dāng)于:

.rwd-header {grid-column: 1 ／ 4;grid-row: 1 ／ 2; } 復(fù)制代碼

簡(jiǎn)寫成兩個(gè)屬性，<開始> / <結(jié)束>。

相當(dāng)于:

.rwd-header {grid-column: 1 ／ span 3;grid-row: 1; } 復(fù)制代碼

span 3指的是經(jīng)過了3個(gè)網(wǎng)格；如果網(wǎng)格項(xiàng)只跨越了1格，可以省略設(shè)置結(jié)束位置的網(wǎng)格線。

相當(dāng)于:

.rwd-header {grid-area: 1 / 1 / 2 / 4; } 復(fù)制代碼

網(wǎng)格線上左下右的順序，不同于margin和padding的上右下左。

當(dāng)然你可以別管這么多亂七八糟的，看我自適應(yīng)布局:

@media only screen and (max-width: 1024px) {.rwd-grid {grid-template-rows: 80px 150px 50px 200px 100px 100px;grid-template-columns: 30% 70%;}.rwd-header {grid-area: 1 / 1 / 2 / 3;}.rwd-content-left {grid-area: 2 / 1 / 4 / 2;}.rwd-content-bodyTop {grid-area: 2 / 2 / 3 / 3;}.rwd-content-bodyBottom {grid-area: 3 / 2 / 5 / 3;}.rwd-content-right {grid-area: 5 / 1 / 6 / 3;}.rwd-footer {grid-area: 6 / 1 / 7 / 3;} } 復(fù)制代碼

親自試一試2

詳細(xì)教程點(diǎn)這里：網(wǎng)格中基于線的定位^[3]和這里 網(wǎng)格模板區(qū)域^[4]

Grid vs. Flexbox

flexbox是單方向的，橫向或者縱向，grid是二維的。
grid就是可以為所欲為，甚至和html的順序沒有關(guān)系，只要扔到grid容器里就可以。
grid能做到flexbox做不到的事，反之亦然。如果瀏覽器支持，最好結(jié)合兩者使用。
grid適合布局大的骨架，flexbox適合布局局部。
grid的最大缺點(diǎn)是瀏覽器支持不是很好。
grid另一個(gè)缺點(diǎn)是，如果要往現(xiàn)有的布局里加一點(diǎn)或者刪一點(diǎn)東西，基本就是重畫了，其實(shí)也不算缺點(diǎn)，因?yàn)橹禺嫼芸臁?/li>
grid不適合復(fù)雜的布局，因?yàn)榫W(wǎng)格線太多我頭暈。
grid小技巧，用chrome和firefox的調(diào)試工具查看grid容器可以看到網(wǎng)格，光看代碼要瘋。

Can I use grid ?

5. 絕對(duì)、相對(duì)定位 position:absolute|relative

相當(dāng)常用，特別是各種特效里都會(huì)用到。

對(duì)于自適應(yīng)布局，就自己算top和left吧。

6. 表格 <table>或display:table

個(gè)人認(rèn)為表格布局比較適用于表格(看上去是廢話，但并不是)。

如果是一般的頁面布局，就不要用table了。Why not use tables for layout in HTML?^[5]

關(guān)于表格的自適應(yīng)，看這里：Responsive table layout^[6]

7. 使用框架布局 bootstrap、Pure.css等

所謂萬變不離其宗，用框架布局也是使用了上面所說的原理，這邊就不再細(xì)說各種框架。

* IE盒模型

推薦給所有元素加上border-box;。

* {box-sizing: border-box; } 復(fù)制代碼

IE盒模型的寬度和高度包括了padding和border，這樣對(duì)于百分比的布局比較好控制，不會(huì)出現(xiàn)加起來超過100%而換行的情況。

* 盡量不使用固定高度、寬度

在自適應(yīng)的布局中少用或者不用固定的高度、寬度，使用百分比, auto或calc()。

* viewport

viewport主要用于手機(jī)自適應(yīng)布局，因?yàn)楝F(xiàn)在手機(jī)分辨率越來越高，web上的1px到手機(jī)上未必就是1px，用這個(gè)meta讓手機(jī)的px和web的px保持一致。

具體解釋在這里: viewport meta^[7]

說到這里，看完的同學(xué)應(yīng)該都明白了web自適應(yīng)布局常見的套路。

當(dāng)碰到某個(gè)酷炫的自適應(yīng)頁面的時(shí)候至少不會(huì)說: 這個(gè)怎么實(shí)現(xiàn)的？還有這種操作？

最后總結(jié)一下:

自適應(yīng)布局需要注意的事:

使用IE盒模型box-sizing: border-box

不要用固定寬高，使用百分比, auto或calc()

@media是自適應(yīng)布局利器

手機(jī)上要設(shè)置meta viewport

關(guān)于各種布局的選擇：在瀏覽器支持的情況下，頁面的大框架推薦用grid布局。定好架子后，局部布局推薦用flex。 float和inline-block瀏覽器支持好，但各有缺點(diǎn)。

那么有同學(xué)就要問，是不是只要學(xué)flex和grid就行了？對(duì)不起，所有都要學(xué)（就是這么可怕）。各種布局都有他們的使用場(chǎng)景。并且你也攔不住別人用，都需要看懂是吧。只能說要與時(shí)俱進(jìn)，路漫漫其修遠(yuǎn)兮，吾將上下而求索。

參考資料

[1] Flex布局教程 - http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2] A Complete Guide to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[3] CSS網(wǎng)格中基于線的定位 - https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid

[4] 網(wǎng)格模板區(qū)域 - https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas

[5] Why not use tables for layout in HTML? - https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html

[6] Responsive table layout - http://allthingssmitty.com/2016/10/03/responsive-table-layout/

[7] Using the viewport meta tag to control layout on mobile browsers - https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

[8] Responsive Web Design - https://www.w3schools.com/css/css_rwd_intro.asp

[9] Can I use - https://caniuse.com/

總結(jié)

以上是生活随笔為你收集整理的Web自适应布局你需要知道的所有事儿的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：将不确定变为确定~transaction
下一篇： java读取utf-8文件第一行多一个问