一、靜態(tài)布局
靜態(tài)布局就是傳統(tǒng)的網(wǎng)站形式，網(wǎng)頁(yè)上的所有元素的尺寸一律使用px作為單位朱监。不管瀏覽器尺寸具體是多少岸啡，網(wǎng)頁(yè)布局始終按照最初寫(xiě)代碼時(shí)的布局來(lái)顯示原叮。常規(guī)的pc的網(wǎng)站都是靜態(tài)（定寬度）布局的，也就是設(shè)置了min-width巡蘸，這樣的話奋隶，如果小于這個(gè)寬度就會(huì)出現(xiàn)滾動(dòng)條，如果大于這個(gè)寬度則內(nèi)容居中外加背景悦荒，這種設(shè)計(jì)常見(jiàn)于pc端唯欣。
二、自適應(yīng)布局
簡(jiǎn)單來(lái)說(shuō)就是分別為不同的屏幕分辨率定義布局搬味，即創(chuàng)建多個(gè)靜態(tài)布局境氢，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍。
屏幕分辨率變化時(shí)碰纬，頁(yè)面里面元素的位置會(huì)變化而大小不會(huì)變化萍聊。
使用 @media 媒體查詢給不同尺寸和介質(zhì)的設(shè)備切換不同的樣式。
在優(yōu)秀的響應(yīng)范圍設(shè)計(jì)下可以給適配范圍內(nèi)的設(shè)備最好的體驗(yàn)悦析，在同一個(gè)設(shè)備下實(shí)際還是固定的布局寿桨。
三、流式布局
頁(yè)面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整强戴，但整體布局不變（柵格布局）亭螟。
當(dāng)屏幕分辨率變化時(shí)，頁(yè)面里元素的大小會(huì)變化而但布局不變骑歹。這就導(dǎo)致如果屏幕太大或者太小都會(huì)導(dǎo)致元素?zé)o法正常顯示预烙。
（1）使用百分比定義寬度，高度大都是用px來(lái)固定住道媚，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實(shí)時(shí)尺寸進(jìn)行調(diào)整默伍，盡可能的適應(yīng)各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動(dòng)范圍以免過(guò)大或者過(guò)小影響閱讀衰琐。
（2）這種布局方式在Web前端開(kāi)發(fā)的早期歷史上也糊，用來(lái)應(yīng)對(duì)不同尺寸的PC屏幕（那時(shí)屏幕尺寸的差異不會(huì)太大），在當(dāng)今的移動(dòng)端開(kāi)發(fā)也是常用布局方式羡宙，但缺點(diǎn)明顯：主要的問(wèn)題是如果屏幕尺度跨度太大狸剃，那么在相對(duì)其原始設(shè)計(jì)而言過(guò)小或過(guò)大的屏幕上不能正常顯示。
（3）因?yàn)閷挾仁褂?百分比定義狗热，但是高度和文字大小等大都是用px來(lái)固定钞馁，所以在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁(yè)面元素寬度被拉的很長(zhǎng)虑省，但是高度、文字大小還是和原來(lái)一樣僧凰，顯示非常不協(xié)調(diào)探颈。
是在于如果屏幕尺度跨度太大，那么在相對(duì)其原始設(shè)計(jì)而言過(guò)小或過(guò)大的屏幕上不能正常顯示训措。網(wǎng)頁(yè)中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)（搭配min-*伪节、max-*屬性使用）。例如绩鸣，設(shè)置網(wǎng)頁(yè)主體的寬度為80%怀大，min-width為960px。圖片也作類似處理（width:100%, max-width一般設(shè)定為圖片本身的尺寸呀闻，防止被拉伸而失真）化借。
三、流式布局
頁(yè)面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整捡多，但整體布局不變（柵格布局）蓖康。
當(dāng)屏幕分辨率變化時(shí)，頁(yè)面里元素的大小會(huì)變化而但布局不變垒手。這就導(dǎo)致如果屏幕太大或者太小都會(huì)導(dǎo)致元素?zé)o法正常顯示蒜焊。
（1）使用百分比定義寬度，高度大都是用px來(lái)固定住淫奔，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實(shí)時(shí)尺寸進(jìn)行調(diào)整山涡，盡可能的適應(yīng)各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動(dòng)范圍以免過(guò)大或者過(guò)小影響閱讀唆迁。
（2）這種布局方式在Web前端開(kāi)發(fā)的早期歷史上鸭丛，用來(lái)應(yīng)對(duì)不同尺寸的PC屏幕（那時(shí)屏幕尺寸的差異不會(huì)太大），在當(dāng)今的移動(dòng)端開(kāi)發(fā)也是常用布局方式唐责，但缺點(diǎn)明顯：主要的問(wèn)題是如果屏幕尺度跨度太大鳞溉，那么在相對(duì)其原始設(shè)計(jì)而言過(guò)小或過(guò)大的屏幕上不能正常顯示。
（3）因?yàn)閷挾仁褂?百分比定義鼠哥，但是高度和文字大小等大都是用px來(lái)固定熟菲，所以在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁(yè)面元素寬度被拉的很長(zhǎng)，但是高度朴恳、文字大小還是和原來(lái)一樣抄罕，顯示非常不協(xié)調(diào)。
是在于如果屏幕尺度跨度太大于颖，那么在相對(duì)其原始設(shè)計(jì)而言過(guò)小或過(guò)大的屏幕上不能正常顯示呆贿。網(wǎng)頁(yè)中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)（搭配min-*、max-*屬性使用）。例如做入，設(shè)置網(wǎng)頁(yè)主體的寬度為80%冒晰，min-width為960px。圖片也作類似處理（width:100%, max-width一般設(shè)定為圖片本身的尺寸竟块，防止被拉伸而失真）壶运。
為不同的屏幕分辨率定義布局浪秘，同時(shí)蒋情，在每個(gè)布局中，應(yīng)用流式布局的理念秫逝，即頁(yè)面元素寬度隨著窗口調(diào)整而自動(dòng)適配恕出⊙叮可以把響應(yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計(jì)理念的融合违帆。即：創(chuàng)建多個(gè)流體式布局，分別對(duì)應(yīng)一個(gè)屏幕分辨率范圍金蜀。響應(yīng)式幾乎已經(jīng)成為優(yōu)秀頁(yè)面布局的標(biāo)準(zhǔn)刷后。
每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式，即元素位置和大小都會(huì)變渊抄。
媒體查詢+流式布局尝胆。通常使用 @media 媒體查詢 和網(wǎng)格系統(tǒng) (Grid System) 配合相對(duì)布局單位進(jìn)行布局，實(shí)際上就是綜合響應(yīng)式护桦、流動(dòng)等上述技術(shù)通過(guò) CSS 給單一網(wǎng)頁(yè)不同設(shè)備返回不同樣式的技術(shù)統(tǒng)稱含衔。
--------優(yōu)點(diǎn)--------
適應(yīng)pc和移動(dòng)端，如果足夠耐心二庵，效果完美贪染。
--------缺點(diǎn)--------
（1）媒體查詢是有限的，也就是可以枚舉出來(lái)的催享，只能適應(yīng)主流的寬高杭隙。
（2）要匹配足夠多的屏幕大小，工作量不小因妙，設(shè)計(jì)也需要多個(gè)版本痰憎。
響應(yīng)式頁(yè)面一般會(huì)在頭部加上這一段代碼：
一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每個(gè)終端做一個(gè)特定的版本攀涵。@media all(用于所有的設(shè)備) || screen (用于電腦屏幕,平板電腦,智能手機(jī)等) ?and|not|only(三個(gè)關(guān)鍵字可以選)铣耘。隨著縮放就會(huì)看到顏色的變化。
rem是相對(duì)于html元素的font-size大小而言的蜗细，而em是相對(duì)于其父元素。使用rem單位的彈性布局在移動(dòng)端很受歡迎据德。
(1)適應(yīng)性強(qiáng)鳄乏，在做不同屏幕分辨率的界面時(shí)非常實(shí)用
(2)可以隨意按照寬度跷车、比例劃分元素的寬高
(3)可以輕松改變?cè)氐娘@示順序
(4)彈性布局實(shí)現(xiàn)快捷，易維護(hù)
display:box將一個(gè)元素的子元素以彈性布局進(jìn)行布局
box-orient:horizontal ?|| vertical || inherit子元素排列方式?
box-align:start || end || center子元素的對(duì)齊方式 (規(guī)定水平框中垂直位置 或 垂直框中水平位置)
box-flex:number子元素如何分配剩余空間
box-ordinal-group:number子元素顯示順序
box-direction:normal || reverse || inherit子元素的排列順序
box-pack: start || end || center子元素的對(duì)齊方式(規(guī)定水平框中水平位置 或 垂直框中垂直位置)
點(diǎn)擊此鏈接橱野，可以查看靜態(tài)布局朽缴、自適應(yīng)布局、流式布局水援、響應(yīng)式布局的效果密强。
https://blog.csdn.net/sujin_/article/details/82594156
https://www.cnblogs.com/soyxiaobi/p/9594557.html
