作為前端開發(fā)工程師，布局方式有多種蕾额，針對(duì)不同的情況有不一樣的處理早芭，但是很多初學(xué)的同學(xué)都不知道這些情況，那么我們今天就來說說诅蝶，那些前端開發(fā)工程師不可不知的5種布局方式退个！
一募壕、靜態(tài)布局（static layout）
1.布局特點(diǎn)
不管瀏覽器尺寸具體是多少，網(wǎng)頁布局始終按照最初寫代碼時(shí)的布局來顯示语盈。常規(guī)的pc的網(wǎng)站都是靜態(tài)（定寬度）布局的舱馅，也就是設(shè)置了min-width，這樣的話刀荒，如果小于這個(gè)寬度就會(huì)出現(xiàn)滾動(dòng)條代嗤，如果大于這個(gè)寬度則內(nèi)容居中外加背景，這種設(shè)計(jì)常見于pc端缠借。
2.設(shè)計(jì)方法
PC：居中布局干毅，所有樣式使用絕對(duì)寬度/高度(px)，設(shè)計(jì)一個(gè)Layout泼返，在屏幕寬高有調(diào)整時(shí)硝逢，使用橫向和豎向的滾動(dòng)條來查閱被遮掩部分。
移動(dòng)設(shè)備：另外建立移動(dòng)網(wǎng)站绅喉，單獨(dú)設(shè)計(jì)一個(gè)布局渠鸽，使用不同的域名如wap.或m.。
優(yōu)點(diǎn)：這種布局方式對(duì)設(shè)計(jì)師和CSS編寫者來說都是最簡單的霹疫，亦沒有兼容性問題拱绑。
缺點(diǎn)：顯而易見，即不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)丽蝎。當(dāng)前猎拨，大部分門戶網(wǎng)站、大部分企業(yè)的PC宣傳站點(diǎn)都采用了這種布局方式屠阻。固定像素尺寸的網(wǎng)頁是匹配固定像素尺寸顯示器的最簡單辦法红省。但這種方法不是一種完全兼容未來網(wǎng)頁的制作方法，我們需要一些適應(yīng)未知設(shè)備的方法国觉。
二吧恃、流式布局（Liquid Layout）
流式布局（Liquid）的特點(diǎn)（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變麻诀。代表作柵欄系統(tǒng)（網(wǎng)格系統(tǒng)）痕寓。
網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)（搭配min-*、max-*屬性使用）蝇闭，例如呻率，設(shè)置網(wǎng)頁主體的寬度為80%，min-width為960px呻引。圖片也作類似處理（width:100%, max-width一般設(shè)定為圖片本身的尺寸礼仗，防止被拉伸而失真）。
1. 布局特點(diǎn)
屏幕分辨率變化時(shí)，頁面里元素的大小會(huì)變化而但布局不變元践【录梗【這就導(dǎo)致如果屏幕太大或者太小都會(huì)導(dǎo)致元素?zé)o法正常顯示。
2. 設(shè)計(jì)方法
使用%百分比定義寬度单旁，高度大都是用px來固定住沪羔，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實(shí)時(shí)尺寸進(jìn)行調(diào)整，盡可能的適應(yīng)各種分辨率慎恒。往往配合 max-width/min-width 等屬性控制尺寸流動(dòng)范圍以免過大或者過小影響閱讀任内。
這種布局方式在Web前端開發(fā)的早期歷史上，用來應(yīng)對(duì)不同尺寸的PC屏幕（那時(shí)屏幕尺寸的差異不會(huì)太大）融柬，在當(dāng)今的移動(dòng)端開發(fā)也是常用布局方式死嗦，但缺點(diǎn)明顯：主要的問題是如果屏幕尺度跨度太大，那么在相對(duì)其原始設(shè)計(jì)而言過小或過大的屏幕上不能正常顯示粒氧。因?yàn)閷挾仁褂?百分比定義越除，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁面元素寬度被拉的很長外盯，但是高度摘盆、文字大小還是和原來一樣（即，這些東西無法變得“流式”）饱苟，顯示非常不協(xié)調(diào)孩擂。
三、自適應(yīng)布局（Adaptive Layout）
自適應(yīng)布局的特點(diǎn)是分別為不同的屏幕分辨率定義布局箱熬，即創(chuàng)建多個(gè)靜態(tài)布局类垦，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態(tài)局部（頁面元素位置發(fā)生改變）城须，但在每個(gè)靜態(tài)布局中蚤认，頁面元素不隨窗口大小的調(diào)整發(fā)生變化「夥ィ可以把自適應(yīng)布局看作是靜態(tài)布局的一個(gè)系列砰琢。
1.布局特點(diǎn)
屏幕分辨率變化時(shí)，頁面里面元素的位置會(huì)變化而大小不會(huì)變化良瞧。
2.設(shè)計(jì)方法
使用?@media 媒體查詢給不同尺寸和介質(zhì)的設(shè)備切換不同的樣式陪汽。在優(yōu)秀的響應(yīng)范圍設(shè)計(jì)下可以給適配范圍內(nèi)的設(shè)備最好的體驗(yàn)，在同一個(gè)設(shè)備下實(shí)際還是固定的布局褥蚯。
四掩缓、響應(yīng)式布局（Responsive Layout）
隨著CSS3出現(xiàn)了媒體查詢技術(shù)，又出現(xiàn)了響應(yīng)式設(shè)計(jì)的概念遵岩。響應(yīng)式設(shè)計(jì)的目標(biāo)是確保一個(gè)頁面在所有終端上（各種尺寸的PC、手機(jī)、手表尘执、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果舍哄，對(duì)CSS編寫者而言，在實(shí)現(xiàn)上不拘泥于具體手法誊锭，但通常是糅合了流式布局+彈性布局表悬，再搭配媒體查詢技術(shù)使用∩ッ遥——分別為不同的屏幕分辨率定義布局蟆沫，同時(shí)，在每個(gè)布局中温治，應(yīng)用流式布局的理念饭庞，即頁面元素寬度隨著窗口調(diào)整而自動(dòng)適配。即：創(chuàng)建多個(gè)流體式布局熬荆，分別對(duì)應(yīng)一個(gè)屏幕分辨率范圍舟山。可以把響應(yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計(jì)理念的融合卤恳。
響應(yīng)式幾乎已經(jīng)成為優(yōu)秀頁面布局的標(biāo)準(zhǔn)累盗。
1. 布局特點(diǎn)
每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式，即元素位置和大小都會(huì)變突琳。
2. 設(shè)計(jì)方法
媒體查詢+流式布局若债。通常使用 @media 媒體查詢 和網(wǎng)格系統(tǒng) (Grid System) 配合相對(duì)布局單位進(jìn)行布局，實(shí)際上就是綜合響應(yīng)式拆融、流動(dòng)等上述技術(shù)通過 CSS 給單一網(wǎng)頁不同設(shè)備返回不同樣式的技術(shù)統(tǒng)稱蠢琳。
優(yōu)點(diǎn)：適應(yīng)pc和移動(dòng)端，如果足夠耐心冠息，效果完美挪凑。
缺點(diǎn)：（1）媒體查詢是有限的，也就是可以枚舉出來的逛艰，只能適應(yīng)主流的寬高躏碳。（2）要匹配足夠多的屏幕大小，工作量不小散怖，設(shè)計(jì)也需要多個(gè)版本菇绵。
響應(yīng)式頁面在頭部會(huì)加上這一段代碼：
<meta name="applicable-device" content="pc,mobile"><meta http-equiv="Cache-Control" content="no-transform ">
五、彈性布局（rem/em布局）
1. rem/em區(qū)別：rem是相對(duì)于html元素的font-size大小而言的镇眷，而em是相對(duì)于其父元素咬最。
2. 使用 em 或 rem 單位進(jìn)行相對(duì)布局，相對(duì)%百分比更加靈活欠动，同時(shí)可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示永乌，因?yàn)閑m是相對(duì)父級(jí)元素的原因沒有得到推廣惑申。【中國站點(diǎn)制作網(wǎng)頁的時(shí)候翅雏，習(xí)慣用CSS強(qiáng)制定義字體大小圈驼，保證每個(gè)人都看到一致的效果，包括網(wǎng)易望几、搜狐這些門戶網(wǎng)站在內(nèi)的大部分站點(diǎn)绩脆，用的都是絕對(duì)單位px（像素）。但是橄抹，如果從網(wǎng)站易用性方面考慮笛洛，字體大小應(yīng)該是可變的梅割，一些視力不是那么好的人需要放大字體才能看得清頁面內(nèi)容榛了。然而沪伙，占據(jù)大部分瀏覽器市場的IE無法調(diào)整那些使用px作為單位的字體大小。國外人士非常重視網(wǎng)站的易用性慌随，相當(dāng)一部分外國站點(diǎn)已經(jīng)使用em作為字體單位芬沉。
3.?這類布局的特點(diǎn)是，包裹文字的各元素的尺寸采用em/rem做單位阁猜，而頁面的主要?jiǎng)澐謪^(qū)域的尺寸仍使用百分?jǐn)?shù)或px做單位（同「流式布局」或「靜態(tài)/固定布局」）丸逸。早期瀏覽器不支持整個(gè)頁面按比例縮放，僅支持網(wǎng)頁內(nèi)文字尺寸的放大剃袍，這種情況下黄刚。使用em/rem做單位，可以使包裹文字的元素隨著文字的縮放而縮放民效。
4.?瀏覽器的默認(rèn)字體高度一般為16px憔维，即1em:16px，但是 1:16 的比例不方便計(jì)算畏邢，為了使單位em/rem更直觀业扒，CSS編寫者常常將頁面跟節(jié)點(diǎn)字體設(shè)為62.5%，比如選擇用rem控制字體時(shí)舒萎，先需要設(shè)置根節(jié)點(diǎn)html的字體大小程储，因?yàn)闉g覽器默認(rèn)字體大小16px*62.5%=10px。這樣1rem便是10px臂寝，方便了計(jì)算章鲤。
5.?用em/rem定義尺寸的另一個(gè)好處是更能適應(yīng)縮進(jìn)/以字體單位padding或margin／瀏覽器設(shè)置字體尺寸等情況（因?yàn)閑m/rem相對(duì)于字體大小，會(huì)同步改變）咆贬。例如：p{ text-indent: 2em; }败徊。
6. 使用rem單位的彈性布局在移動(dòng)端也很受歡迎。
7.?其實(shí)在移動(dòng)端使用所謂的彈性布局掏缎，是比較勉強(qiáng)的皱蹦。移動(dòng)端彈性布局流行起來的原因歸根結(jié)底是rem單位對(duì)于（根據(jù)屏幕尺寸）調(diào)整頁面的各元素的尺寸煤杀、文字大小時(shí)比較好用。其實(shí)根欧，使用vw怜珍、vh等后起之秀的單位，可以實(shí)現(xiàn)完美的流式布局（高度和文字大小都可以變得“流式”）凤粗，彈性布局就不再必要了。
六今豆、結(jié)論
1.如果只做pc端嫌拣，那么靜態(tài)布局（定寬度）是最好的選擇。
2.如果做移動(dòng)端呆躲，且設(shè)計(jì)對(duì)高度和元素間距要求不高异逐，那么彈性布局（rem+js）是最好的選擇，一份css+一份js調(diào)節(jié)font-size搞定插掂。
3.如果pc灰瞻，移動(dòng)要兼容，而且要求很高那么響應(yīng)式布局還是最好的選擇辅甥，前提是設(shè)計(jì)根據(jù)不同的高寬做不同的設(shè)計(jì)酝润，響應(yīng)式根據(jù)媒體查詢做不同的布局。
