一、靜態(tài)布局（Static Layout）

即傳統(tǒng)Web設(shè)計(jì)陨收，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位饭豹。

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.荣堰。

在移動(dòng)端開發(fā)中采用靜態(tài)布局的兩種方式：(來自：流布局與響應(yīng)式網(wǎng)頁設(shè)計(jì)有什么區(qū)別床未？)

（1）在viewport meta標(biāo)簽上設(shè)置width=320，頁面的各個(gè)元素也采用px作為單位振坚。通過用JS動(dòng)態(tài)修改標(biāo)簽的initial-scale使得頁面等比縮放薇搁，從而剛好占滿整個(gè)屏幕。

（2）設(shè)在viewport meta標(biāo)簽上設(shè)置content"width=640,user-scalable=no渡八，頁面的各個(gè)元素也采用px作為單位啃洋。由于640px超出了手機(jī)寬度，瀏覽器會(huì)自動(dòng)縮小頁面至剛好全屏屎鳍。

優(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è)版本罢维。

總結(jié)：

響應(yīng)式與自適應(yīng)的原理是相似的淹仑，都是檢測(cè)設(shè)備，根據(jù)不同的設(shè)備采用不同的css肺孵，而且css都是采用的百分比的攻人，而不是固定的寬度，不同點(diǎn)是響應(yīng)式的模板在不同的設(shè)備上看上去是不一樣的悬槽，會(huì)隨著設(shè)備的改變而改變展示樣式怀吻，而自適應(yīng)不會(huì)，所有的設(shè)備看起來都是一套的模板初婆，不過是長度或者圖片變小了蓬坡，不會(huì)根據(jù)設(shè)備采用不同的展示樣式猿棉，流式就是采用了一些設(shè)置，當(dāng)寬度大于多少時(shí)怎么展示屑咳，小于多少時(shí)怎么展示萨赁，而且展示的方式向水流一樣，一部分一部分的加載兆龙，靜態(tài)的就是采用固定寬度的了杖爽。

流式布局是用于解決類似的設(shè)備不同分辨率之間的兼容(一般分辨率差異較少)；響應(yīng)式是用于解決不同設(shè)備之間不同分辨率之間的兼容問題(一般是指PC紫皇，平板慰安，手機(jī)等設(shè)備之間較大的分辨率差異)。

如何實(shí)現(xiàn)響應(yīng)式布局：折騰響應(yīng)式布局設(shè)計(jì)聪铺，應(yīng)運(yùn)而生的web頁面響應(yīng)布局

五化焕、彈性布局（rem/em布局）

參考：流布局與響應(yīng)式網(wǎng)頁設(shè)計(jì)有什么區(qū)別？

1铃剔、rem,em區(qū)別：rem,em都是順應(yīng)不同網(wǎng)頁字體大小展現(xiàn)而產(chǎn)生的撒桨。其中，em是相對(duì)其父元素键兜，在實(shí)際應(yīng)用中相對(duì)而言會(huì)帶來很多不便凤类；而rem是始終相對(duì)于html大小，即頁面根元素普气。

2踱蠢、使用 em 或 rem 單位進(jìn)行相對(duì)布局，相對(duì)%百分比更加靈活棋电，同時(shí)可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示，因?yàn)閑m是相對(duì)父級(jí)元素的原因沒有得到推廣苇侵「峡【國內(nèi)站點(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ù)大部分瀏覽器市場(chǎng)的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ì)算。

Set body font-size to 62.5% for Easier em Conversion:

If you would like to use relative units (em) for your font sizes,?declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).

那么為什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢萤彩？

因?yàn)橛行g覽器默認(rèn)的不是16px愚墓，或者用戶修改了瀏覽器默認(rèn)的字體大猩ㄏ佟（因?yàn)g覽器分辨率大小，視力议经，習(xí)慣等因素）。如果我們將其設(shè)置為10px谴返，一定會(huì)影響在這些瀏覽器上的效果煞肾，所以最好用絕大多數(shù)用戶默認(rèn)的16作為基數(shù) * 62.5% 得到我們需要的10px。

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}body {font-size: 1.4rem;/*1.4 × 10px = 14px */}h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

實(shí)際項(xiàng)目設(shè)置成?font-size: 62.5%可能會(huì)出現(xiàn)問題嗓袱，因?yàn)閏hrome不支持小于12px的字體籍救，計(jì)算小于12px的時(shí)候，會(huì)默認(rèn)取12px去計(jì)算渠抹，導(dǎo)致chrome的em/rem計(jì)算不準(zhǔn)確蝙昙。

針對(duì)這個(gè)現(xiàn)象闪萄，可以嘗試設(shè)置html字體為100px，body 修正為16px奇颠，這樣 0.1rem 就是 10px败去，而body的字體仍然是默認(rèn)大小，不影響未設(shè)置大小的元素的默認(rèn)字體的大小烈拒。

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)端也很受歡迎。

工具ViewtoREM：PX轉(zhuǎn)換到REM（自動(dòng)預(yù)處理）

rem的定義：font size of the root element吨铸，rem是相對(duì)于根元素來設(shè)置字體大小的行拢，這就意味著，我們只需要根據(jù)自己的需求在根元素確定一個(gè)參考值诞吱。

rem與em舟奠、px的區(qū)別：

px：像素，比較精確的單位狐胎，但不好做響應(yīng)式布局

em：以父節(jié)點(diǎn)font-size大小為參考點(diǎn)鸭栖，標(biāo)準(zhǔn)不統(tǒng)一，容易造成混亂

REM支持的瀏覽器：Mozilla Firefox 3.6+握巢、Apple Safari 5+晕鹊、Google Chrome、IE9+和Opera11+暴浦。IE6-8無法支持溅话。

對(duì)于不同尺寸的屏幕，可以統(tǒng)一假設(shè)屏幕寬度為640px后編寫CSS（當(dāng)然你也可以假定統(tǒng)一為320px）歌焦。此時(shí)飞几，我們?cè)O(shè)定html元素的font-size為40px（同樣，只是舉例）独撇，然后各處（元素尺寸屑墨、文字大小）使用rem作為單位纷铣，隨后搭配媒體查詢或JS卵史，根據(jù)屏幕的大小來動(dòng)態(tài)控制html元素的font-size（特定屏幕尺寸下，html元素的font-size應(yīng)當(dāng)設(shè)置為何值搜立，是使用這個(gè)方案時(shí)設(shè)計(jì)師和程序員需要反復(fù)考慮后確定的以躯，以下試舉一段相關(guān)的CSS媒體查詢代碼），即可自動(dòng)改變所有用rem定義尺寸的元素的大小（且CSS編寫者在腦中進(jìn)行換算的計(jì)算過程比em簡單得多）。

?其實(shí)在移動(dòng)端使用所謂的彈性布局忧设，是比較勉強(qiáng)的刁标。移動(dòng)端彈性布局流行起來的原因歸根結(jié)底是rem單位對(duì)于（根據(jù)屏幕尺寸）調(diào)整頁面的各元素的尺寸、文字大小時(shí)比較好用址晕。其實(shí)膀懈，使用vw、vh等后起之秀的單位斩箫，可以實(shí)現(xiàn)完美的流式布局（高度和文字大小都可以變得“流式”）吏砂，彈性布局就不再必要了。詳細(xì)可參考：視區(qū)相關(guān)單位vw, vh..簡介以及可實(shí)際應(yīng)用場(chǎng)景

以下優(yōu)缺點(diǎn)參考：響應(yīng)式設(shè)計(jì)和REM布局的對(duì)比

優(yōu)點(diǎn)：理想狀態(tài)是所有屏幕的高寬比和最初的設(shè)計(jì)高寬比一樣乘客，或者相差不多狐血，完美適應(yīng)。

缺點(diǎn)：這種rem+js只不過是寬度自適應(yīng)易核，高度沒有做到自適應(yīng)匈织，一些對(duì)高度，或者元素間距要求比較高的設(shè)計(jì)牡直，則這種布局沒有太大的意義缀匕。

響應(yīng)式和彈性布局之間的對(duì)比：

響應(yīng)式布局：改變?yōu)g覽器寬度，“布局”會(huì)隨之變化碰逸，不是一成不變的乡小，例如導(dǎo)航欄在大屏幕下是橫排，在小屏幕下是豎排饵史，在超小屏幕下隱藏為菜單满钟，也就是說如果有足夠的耐心，在每一種屏幕下都應(yīng)該有合理的布局胳喷，完美的效果湃番。

rem布局：改變?yōu)g覽器寬度，頁面所有元素的高寬都等比例縮放吭露，也就是大屏幕下導(dǎo)航是橫的吠撮，小屏幕下還是橫的只不過變小了。

結(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ù)媒體查詢做不同的布局吃警。