一肆捕、靜態(tài)布局（static layout）
即傳統(tǒng)Web設(shè)計，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位。
1额衙、布局特點
不管瀏覽器尺寸具體是多少，網(wǎng)頁布局始終按照最初寫代碼時的布局來顯示怕吴。常規(guī)的pc的網(wǎng)站都是靜態(tài)（定寬度）布局的窍侧，也就是設(shè)置了min-width，這樣的話转绷，如果小于這個寬度就會出現(xiàn)滾動條伟件，如果大于這個寬度則內(nèi)容居中外加背景，這種設(shè)計常見于pc端议经。
2斧账、設(shè)計方法
PC：居中布局，所有樣式使用絕對寬度/高度(px)煞肾，設(shè)計一個Layout其骄，在屏幕寬高有調(diào)整時，使用橫向和豎向的滾動條來查閱被遮掩部分扯旷；
移動設(shè)備：另外建立移動網(wǎng)站拯爽，單獨設(shè)計一個布局，使用不同的域名如wap.或m.钧忽。
優(yōu)點：這種布局方式對設(shè)計師和CSS編寫者來說都是最簡單的毯炮，亦沒有兼容性問題逼肯。
缺點：顯而易見，即不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)桃煎。當前篮幢，大部分門戶網(wǎng)站、大部分企業(yè)的PC宣傳站點都采用了這種布局方式为迈。固定像素尺寸的網(wǎng)頁是匹配固定像素尺寸顯示器的最簡單辦法三椿。但這種方法不是一種完全兼容未來網(wǎng)頁的制作方法，我們需要一些適應未知設(shè)備的方法葫辐。
二搜锰、流式布局（Liquid Layout）
流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調(diào)整，但整體布局不變耿战。代表作柵欄系統(tǒng)（網(wǎng)格系統(tǒng)）蛋叼。
網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分數(shù)（搭配min-、max-屬性使用）剂陡，例如狈涮，設(shè)置網(wǎng)頁主體的寬度為80%，min-width為960px鸭栖。圖片也作類似處理（width:100%, max-width一般設(shè)定為圖片本身的尺寸歌馍，防止被拉伸而失真）。
1. 布局特點
屏幕分辨率變化時晕鹊，頁面里元素的大小會變化而但布局不變骆姐。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示捏题。
2. 設(shè)計方法
使用%百分比定義寬度玻褪，高度大都是用px來固定住，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實時尺寸進行調(diào)整公荧，盡可能的適應各種分辨率带射。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。
這種布局方式在Web前端開發(fā)的早期歷史上循狰，用來應對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大）窟社，在當今的移動端開發(fā)也是常用布局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大绪钥，那么在相對其原始設(shè)計而言過小或過大的屏幕上不能正常顯示灿里。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定程腹，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長匣吊，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”）色鸳，顯示非常不協(xié)調(diào)
三社痛、自適應布局（Adaptive Layout）
自適應布局的特點是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個靜態(tài)布局命雀，每個靜態(tài)布局對應一個屏幕分辨率范圍蒜哀。改變屏幕分辨率可以切換不同的靜態(tài)局部（頁面元素位置發(fā)生改變），但在每個靜態(tài)布局中吏砂，頁面元素不隨窗口大小的調(diào)整發(fā)生變化撵儿。可以把自適應布局看作是靜態(tài)布局的一個系列狐血。
1淀歇、布局特點
屏幕分辨率變化時，頁面里面元素的位置會變化而大小不會變化氛雪。
2、設(shè)計方法
使用 @media 媒體查詢給不同尺寸和介質(zhì)的設(shè)備切換不同的樣式耸成。在優(yōu)秀的響應范圍設(shè)計下可以給適配范圍內(nèi)的設(shè)備最好的體驗报亩，在同一個設(shè)備下實際還是固定的布局。
四井氢、響應式布局（Responsive Layout）
隨著CSS3出現(xiàn)了媒體查詢技術(shù)弦追，又出現(xiàn)了響應式設(shè)計的概念。響應式設(shè)計的目標是確保一個頁面在所有終端上（各種尺寸的PC花竞、手機劲件、手表、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果约急，對CSS編寫者而言零远，在實現(xiàn)上不拘泥于具體手法，但通常是糅合了流式布局+彈性布局厌蔽，再搭配媒體查詢技術(shù)使用牵辣。——分別為不同的屏幕分辨率定義布局奴饮，同時纬向，在每個布局中，應用流式布局的理念戴卜，即頁面元素寬度隨著窗口調(diào)整而自動適配逾条。即：創(chuàng)建多個流體式布局，分別對應一個屏幕分辨率范圍投剥∈χ可以把響應式布局看作是流式布局和自適應布局設(shè)計理念的融合。
響應式幾乎已經(jīng)成為優(yōu)秀頁面布局的標準。
1. 布局特點
每個屏幕分辨率下面會有一個布局樣式危彩，即元素位置和大小都會變攒磨。
2. 設(shè)計方法
媒體查詢+流式布局。通常使用 @media 媒體查詢 和網(wǎng)格系統(tǒng) (Grid System) 配合相對布局單位進行布局汤徽，實際上就是綜合響應式娩缰、流動等上述技術(shù)通過 CSS 給單一網(wǎng)頁不同設(shè)備返回不同樣式的技術(shù)統(tǒng)稱。
優(yōu)點：適應pc和移動端谒府，如果足夠耐心拼坎，效果完美。
缺點：（1）媒體查詢是有限的完疫，也就是可以枚舉出來的泰鸡，只能適應主流的寬高。（2）要匹配足夠多的屏幕大小壳鹤，工作量不小盛龄，設(shè)計也需要多個版本。
響應式頁面在頭部會加上這一段代碼：
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">
五芳誓、彈性布局（rem/em布局）
rem/em區(qū)別：rem是相對于html元素的font-size大小而言的余舶，而em是相對于其父元素。
使用 em 或 rem 單位進行相對布局锹淌，相對%百分比更加靈活匿值，同時可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示，因為em是相對父級元素的原因沒有得到推廣赂摆⌒荆【中國站點制作網(wǎng)頁的時候，習慣用CSS強制定義字體大小烟号，保證每個人都看到一致的效果绊谭，包括網(wǎng)易、搜狐這些門戶網(wǎng)站在內(nèi)的大部分站點汪拥，用的都是絕對單位px（像素）龙誊。但是，如果從網(wǎng)站易用性方面考慮喷楣，字體大小應該是可變的趟大，一些視力不是那么好的人需要放大字體才能看得清頁面內(nèi)容。然而铣焊，占據(jù)大部分瀏覽器市場的IE無法調(diào)整那些使用px作為單位的字體大小逊朽。國外人士非常重視網(wǎng)站的易用性，相當一部分外國站點已經(jīng)使用em作為字體單位曲伊。
這類布局的特點是叽讳，包裹文字的各元素的尺寸采用em/rem做單位追他，而頁面的主要劃分區(qū)域的尺寸仍使用百分數(shù)或px做單位（同「流式布局」或「靜態(tài)/固定布局」）。早期瀏覽器不支持整個頁面按比例縮放岛蚤，僅支持網(wǎng)頁內(nèi)文字尺寸的放大邑狸，這種情況下。使用em/rem做單位涤妒，可以使包裹文字的元素隨著文字的縮放而縮放单雾。
瀏覽器的默認字體高度一般為16px，即1em:16px她紫，但是 1:16 的比例不方便計算硅堆，為了使單位em/rem更直觀，CSS編寫者常常將頁面跟節(jié)點字體設(shè)為62.5%贿讹，比如選擇用rem控制字體時渐逃，先需要設(shè)置根節(jié)點html的字體大小，因為瀏覽器默認字體大小16px*62.5%=10px民褂。這樣1rem便是10px茄菊，方便了計算。
用em/rem定義尺寸的另一個好處是更能適應縮進/以字體單位padding或margin／瀏覽器設(shè)置字體尺寸等情況（因為em/rem相對于字體大小赊堪，會同步改變）面殖。例如：p{ text-indent: 2em; }。
使用rem單位的彈性布局在移動端也很受歡迎雹食。
其實在移動端使用所謂的彈性布局畜普，是比較勉強的期丰。移動端彈性布局流行起來的原因歸根結(jié)底是rem單位對于（根據(jù)屏幕尺寸）調(diào)整頁面的各元素的尺寸群叶、文字大小時比較好用。其實钝荡，使用vw街立、vh等后起之秀的單位，可以實現(xiàn)完美的流式布局（高度和文字大小都可以變得“流式”）埠通，彈性布局就不再必要了赎离。
結(jié)論
1.如果只做pc端，那么靜態(tài)布局（定寬度）是最好的選擇端辱；
2.如果做移動端梁剔，且設(shè)計對高度和元素間距要求不高，那么彈性布局（rem+js）是最好的選擇舞蔽，一份css+一份js調(diào)節(jié)font-size搞定荣病；
3.如果pc，移動要兼容渗柿，而且要求很高那么響應式布局還是最好的選擇个盆，前提是設(shè)計根據(jù)不同的高寬做不同的設(shè)計，響應式根據(jù)媒體查詢做不同的布局。
