這樣一個問題請說說你知道的所有web布局方式？

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

1、浮動

float:left|right

2、inline-block

display:inline-block

3、flexible box

display:flex

4、grid

display:grid

5、絕對、相對定位

position:absolute|relative

6、表格

<table>

或

display:table

使用框架布局

bootstrap、Pure.css

有小伙伴就要說，這也太多了吧，我應該怎么選擇？別急，下面我們就開始逐一分析各種方法在web自適應布局下的使用姿勢，最后做個總結。

本文的所有例子使用了同一種三欄布局。

• 大尺寸 width > 1024px

• 中尺寸 768px < width < 1024px

• 小尺寸 width > 768px

1、浮動布局

float:left|right

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

HTML

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

關鍵css

給中間的三欄都設上浮動。

清除浮動

元素的寬度都是百分比。因為沒有內容高度給死了，日常應用時多用auto，讓里面的內容撐開高度。

@media查詢

當@media的查詢條件滿足時，應用{}中的樣式。screen就是指電腦屏幕，還有print指打印頁面。

中尺寸屏幕要把 right 擠下去，只要讓 left 和 content 加起來等于100%，后面的東西就自動換行了。小尺寸用了css選擇器，把所有 rwd-content- 開頭的class寬度都設成100%。

2、inline-block

display:inline-block

HTML

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

關鍵css

對我們這個布局，只是把float:left改成這兩句。自適應的代碼也和float一樣，不重復貼了。

float VS.Inline-block

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

• 如果需要垂直居中，使用inline-block。

• inline-block有空白字符壓縮的問題。

• 使用float，注意要清除浮動。

• 沒有特別推薦用哪種，看個人習慣。

如何調整float或inline-block布局中元素的順序？

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

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

3、flexible box

display:flex

HTML

html還是一樣。

看css前先說說flex基礎。

flexbox布局說白了就是點菜。先想好要吃什么，然后點必選菜，最后點可選菜，愛點不點。先想要吃什么，還是用之前的例子。header和footer不用管，需要布局一個這樣的東西：

然后點必選菜，有下面幾個必選菜要點：

1) flex-direction，選水平方向從左到右，選

flex-direction:row

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

flex-wrap: nowrap

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

space-between

4) 垂直方向怎么布局，選

align-items: flex-start

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

選好這5個之后，再加上display: flex;，往flex容器上一寫，就完事了。可以偷懶的地方: 上面5種屬性，第一個值是默認值，如果選了第一個，這個屬性可以不用寫。最后的可選菜比較常用的是可以調整flex子項(flex item)的順序(order)，單獨改變某個子項的布局等。

關鍵css

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

自適應布局時，設flex-wrap: wrap;，其他一樣。

Flexbox VS Float/Inline-block

• 如果瀏覽器沒問題，flexbox可以替代（或者替代大多數）float和inline-block。

• 相比float，flexbox解決了垂直居中的問題。

• 相比float/inline-block，flexbox多了垂直布局的方式，可以使容器中的內容等高，還可以改變內容的順序。

• flexbox就像名字一樣，非常靈活，同一種布局都可以用多種方式實現。

• flexbox的缺點是需要記的屬性比較多，小部分瀏覽器支持不好。

4. grid布局

display:grid

HTML

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

看css之前還是先說說grid基礎。一般grid有兩種使用方式：

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

2) 網格容器只定義布局，每個網格項在使用的時候，自行選擇放到哪個(或哪幾個)網格中。

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

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

網格線包圍的一個或多塊矩形區域叫網格區塊。

第一種grid布局方式:

網格項(grid item)用grid-area屬性起個名字。

網格容器(grid container)上三個主要屬性要設置：

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

• grid-template-rows: 設置行上的高度，不設置的話為auto。除了固定數字，百分比還有fr。

• grid-template-rows: repeat(3, 1fr)就是三等分的意思。

• grid-template-columns: 設置列的寬度。

自適應布局就是重畫地圖。

第二種grid布局方式:

網格容器上只要設置grid-template-rows和grid-template-columns。網格項在用的時候，自行設置需要放的地方。有很多種設置方式。

四個屬性，分別是行、列的開始和結束。這邊的序號指的是網格線，參照之前圖中橫向的黑色網格線和縱向的紅色網格線。參照圖，應該好理解。相當于:

簡寫成兩個屬性，<開始> / <結束>。

相當于:

span 3指的是經過了3個網格；如果網格項只跨越了1格，可以省略設置結束位置的網格線。

相當于:

網格線上左下右的順序，不同于margin和padding的上右下左。

當然你可以別管這么多亂七八糟的，看我自適應布局:

Grid VS Flexbox

• flexbox是單方向的，橫向或者縱向，grid是二維的。

• grid就是可以為所欲為，甚至和html的順序沒有關系，只要扔到grid容器里就可以。

• grid能做到flexbox做不到的事，反之亦然。如果瀏覽器支持，最好結合兩者使用。

• grid適合布局大的骨架，flexbox適合布局局部。

• grid的最大缺點是瀏覽器支持不是很好。

• grid另一個缺點是，如果要往現有的布局里加一點或者刪一點東西，基本就是重畫了，其實也不算缺點，因為重畫很快。

• grid不適合復雜的布局，因為網格線太多我頭暈。

• grid小技巧，用chrome和firefox的調試工具查看grid容器可以看到網格，光看代碼要瘋。

5. 絕對、相對定位

position:absolute|relative

相當常用，特別是各種特效里都會用到。

對于自適應布局，就自己算top和left吧。

6. 表格

<table>或display:table

個人認為表格布局比較適用于表格(看上去是廢話，但并不是)。如果是一般的頁面布局，就不要用table了。

7. 使用框架布局

bootstrap、Pure.css

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

IE盒模型

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

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

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

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

* viewport

viewport主要用于手機自適應布局，因為現在手機分辨率越來越高，web上的1px到手機上未必就是1px，用這個meta讓手機的px和web的px保持一致。

說到這里，看完的同學應該都明白了web自適應布局常見的套路。當碰到某個酷炫的自適應頁面的時候至少不會說: 這個怎么實現的？還有這種操作？

最后總結一下:

自適應布局需要注意的事:

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

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

3. @media是自適應布局利器

4. 手機上要設置meta viewport

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

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

參考資料

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網格中基于線的定位 - https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid

4. 網格模板區域 - 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/

本文轉載自互聯網，如侵犯了你的權益，請立即聯系告知，謝謝！

原文地址：

https://juejin.im/post/5a22d0086fb9a0451a7631ee

.背景介紹

如今人們經過手機閱讀網頁占了大多數，隨著閱讀方式的改動，網頁完成多終端自適應，無論關于防止工程師無謂的反復勞動或者是項目管理的便利性上來說重要性都是非常巨大的。

2.知識剖析

由于挪動設備越來越多的被人們運用，手機成為訪問互聯網的最常見終端，而我們設計的網頁確是為了呈如今PC端。

手機的屏幕比擬小，寬度通常在600像素以下，而PC的屏幕寬度，普通都在1000像素以上（目前主流寬度是1366×768），有的還到達了2000像素。同樣的內容，要在大小懸殊的屏幕上，都呈現出稱心的效果，并不是一件容易的事。

很多網站的處理辦法，是為不同的設備提供不同的網頁，比方特地提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比擬費事，同時要維護好幾個版本，而且假如一個網站有多個portal（入口），會大大增加架構設計的復雜度。

自適應是為了解決如何在不同大小的設備上呈現同樣的網頁。

3.常見問題

如何進行自適應網頁設計

4.解決方案

1. 在HTML頭部增加viewport標簽。

通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不局限于瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在默認情況下，一般來講，移動設備上的viewport都是要大于瀏覽器可視區域的，這是因為考慮到移動設備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統的為桌面瀏覽器設計的網站移動設備上的瀏覽器都會把自己默認的viewport設為980px或1024px（也可能是其它值，這個是由設備自己決定的），但帶來的后果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。

該meta標簽的作用是讓當前viewport的寬度等于設備的寬度，同時不允許用戶手動縮放。也許允不允許用戶縮放不同的網站有不同的要求，但讓viewport的寬度等于設備的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現橫向滾動條。

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

把移動設備上的viewport分為layout viewport 、 visual viewport 和 ideal viewport 三類，其中的ideal viewport是最適合移動設備的viewport，ideal viewport的寬度等于移動設備的屏幕寬度，只要在css中把某一元素的寬度設為ideal viewport的寬度(單位用px)，那么這個元素的寬度就是設備屏幕的寬度了，也就是寬度為100%的效果。ideal viewport 的意義在于，無論在何種分辨率的屏幕下，那些針對ideal viewport 而設計的網站，不需要用戶手動縮放，也不需要出現橫向滾動條，都可以完美的呈現給用戶。

要得到ideal viewport就必須把默認的layout viewport的寬度設為移動設備的屏幕寬度。因為meta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設為width-device這個特殊的值就行了。

• 2、不使用絕對寬度

在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。

• 3、流動布局

流動布局（fluid grid） "流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。

• 4、MediaQuery模塊

"自適應網頁設計"的核心，就是CSS3引入的MediaQuery模塊。 它的意思就是，自動探測屏幕寬度，然后加載相應的CSS文件。

link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"

上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載a.css文件。

link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css"

如果屏幕寬度在400像素到600像素之間，則加載b.css文件。

5.擴展思考

自適應與響應式的區別

自適應是為了解決如何才能在不同大小的設備上呈現同樣的網頁，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整網頁內容大小。但是無論怎樣，他們主體的內容和布局是沒有變的。

自適應還是暴露出一個問題，如果屏幕太小，即使網頁能夠根據屏幕大小進行適配，但是會感覺在小屏幕上查看，內容過于擁擠，響應式正是為了解決這個問題而衍生出來的概念。它可以自動識別屏幕寬度、并做出相應調整的網頁設計，布局和展示的內容可能會有所變動。

響應式布局被大家熟知的一個重要原因就是 twitter 開源了 bootstrap。

相比自適應網站，響應式網站省去了很多的控件，同時也省去了不少建立和維護的功夫。響應式布局就是一種流體，在按百分比縮放時也能相當的流暢。

使用響應式設計，你要記住所以的布局。這當然可能會使過程混亂，并且使設計更加復雜。這就意味著你應該專注于中等分辨率的視圖，然后再用media querie調整為更低或更高的分辨率。 所以通常的做法是，在一個新的項目中使用響應式設計，在后期的改造中使用自適應設計。

自適應可用于改造現有的網站使其更好地適應移動端。這使你的設計可控制和開發多個特定的視圖。你開發視圖的數量完全取決于你，你的公司和全面的預算。然而，它也提供了一定量的控件（例如在內容和布局上），如此你便無須使用響應式設計。但當你設計多種分辨率時你會發現，在改變窗口大小的時候將會“跳出”布局。

自適應網站可以用于設計和開發一個擁有多個自適應視圖的網站。所以這種設計通常用于改造網站。