一鹅心、靜態(tài)布局
頁上的所有元素的尺寸一律使用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)整時，使用橫向和豎向的滾動條來查閱被遮掩部分
優(yōu)點:這種布局方式對設(shè)計師和CSS編寫者來說都是最簡單的，亦沒有兼容性問題碉京。
缺點：顯而易見厢汹，即不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)。當(dāng)前谐宙，大部分門戶網(wǎng)站烫葬、大部分企業(yè)的PC宣傳站點都采用了這種布局方式。
二卧惜、流式布局
流式布局的特點 是頁面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整厘灼，但整體布局不變夹纫。代表作柵欄系統(tǒng) 網(wǎng)格系統(tǒng)
1. 布局特點
屏幕分辨率變化時咽瓷，頁面里元素的大小會變化而但布局不變
2. 設(shè)計方法
使用%百分比定義寬度，高度大都是用px來固定住
缺點明顯：主要的問題是如果屏幕尺度跨度太大舰讹，那么在相對其原始設(shè)計而言過小或過大的屏幕上不能正常顯示
三茅姜、自適應(yīng)布局
自適應(yīng)布局的特點是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個靜態(tài)布局月匣，每個靜態(tài)布局對應(yīng)一個屏幕分辨率范圍钻洒。
改變屏幕分辨率可以切換不同的靜態(tài)局部（頁面元素位置發(fā)生改變），但在每個靜態(tài)布局中锄开，
頁面元素不隨窗口大小的調(diào)整發(fā)生變化素标。可以把自適應(yīng)布局看作是靜態(tài)布局的一個系列萍悴。
1头遭、布局特點
屏幕分辨率變化時，頁面里面元素的位置會變化而大小不會變化癣诱。
2计维、設(shè)計方法
使用 @media 媒體查詢給不同尺寸和介質(zhì)的設(shè)備切換不同的樣式。
在優(yōu)秀的響應(yīng)范圍設(shè)計下可以給適配范圍內(nèi)的設(shè)備最好的體驗撕予，在同一個設(shè)備下實際還是固定的布局鲫惶。
四、響應(yīng)式布局
1. 布局特點
每個屏幕分辨率下面會有一個布局樣式实抡，即元素位置和大小都會變
2. 設(shè)計方法
媒體查詢+流式布局欠母。
優(yōu)點：適應(yīng)pc和移動端，如果足夠耐心吆寨，效果完美赏淌。
缺點：（1）媒體查詢是有限的，也就是可以枚舉出來的鸟废，只能適應(yīng)主流的寬高猜敢。
（2）要匹配足夠多的屏幕大小，工作量不小，設(shè)計也需要多個版本缩擂。
五鼠冕、彈性布局（rem/em布局）
1. rem/em區(qū)別：rem是相對于html元素的font-size大小而言的，而em是相對于其父元素
2. 使用 em 或 rem 單位進(jìn)行相對布局胯盯，相對%百分比更加靈活懈费，同時可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示
3. 瀏覽器的默認(rèn)字體高度一般為16px，即1em:16px博脑，但是 1:16 的比例不方便計算憎乙，為了使單位em/rem更直觀，
CSS編寫者常常將頁面跟節(jié)點字體設(shè)為62.5%叉趣，比如選擇用rem控制字體時泞边，先需要設(shè)置根節(jié)點html的字體大小，
因為瀏覽器默認(rèn)字體大小16px*62.5%=10px疗杉。這樣1rem便是10px阵谚，方便了計算。
結(jié)論
1.如果只做pc端烟具，那么靜態(tài)布局（定寬度）是最好的選擇梢什；
2.如果做移動端，且設(shè)計對高度和元素間距要求不高朝聋，那么彈性布局（rem+js）是最好的選擇嗡午，一份css+一份js調(diào)節(jié)font-size搞定；
3.如果pc冀痕，移動要兼容荔睹，而且要求很高那么響應(yīng)式布局還是最好的選擇，前提是設(shè)計根據(jù)不同的高寬做不同的設(shè)計金度，響應(yīng)式根據(jù)媒體查詢做不同的布局应媚。
