1.靜態(tài)布局 （Static Layout 適用PC端）
傳統(tǒng)Web設(shè)計(jì)，網(wǎng)頁(yè)上的所有元素的尺寸一律使用px作為單位。
優(yōu)點(diǎn)：這種布局方式對(duì)設(shè)計(jì)師和CSS編寫(xiě)者來(lái)說(shuō)都是最簡(jiǎn)單的，亦沒(méi)有兼容性問(wèn)題。
缺點(diǎn)：顯而易見(jiàn)，即不能根據(jù)用戶(hù)的屏幕尺寸做出不同的表現(xiàn)
2.流式布局
使用百分?jǐn)?shù)（搭配min-、max-屬性使用）
頁(yè)面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變
缺點(diǎn)明顯：寬度使用百分比定義，但是高度和文字大小等大都是用px來(lái)固定，所以在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁(yè)面元素寬度被拉的很長(zhǎng)，但是高度、文字大小還是和原來(lái)一樣（即，這些東西無(wú)法變得“流式”），顯示非常不協(xié)調(diào)。
3.自適應(yīng)布局
創(chuàng)建多個(gè)靜態(tài)布局，每個(gè)靜態(tài)布局對(duì)應(yīng)一個(gè)屏幕分辨率范圍
4.響應(yīng)式布局
檢測(cè)窗口大小利用bootstrap布局
響應(yīng)式設(shè)計(jì)的目標(biāo)是確保一個(gè)頁(yè)面在所有終端上都能顯示出令人滿(mǎn)意的效果
創(chuàng)建多個(gè)流體式布局，分別對(duì)應(yīng)一個(gè)屏幕分辨率范圍。可以把響應(yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計(jì)理念的融合。
優(yōu)點(diǎn)：適應(yīng)pc和移動(dòng)端，如果足夠耐心，效果完美
缺點(diǎn)：
- （1）媒體查詢(xún)是有限的，也就是可以枚舉出來(lái)的，只能適應(yīng)主流的寬高。
- （2）要匹配足夠多的屏幕大小，工作量不小，設(shè)計(jì)也需要多個(gè)版本。
5.彈性布局（rem/em布局）
包裹文字的各元素的尺寸采用em/rem做單位，而頁(yè)面的主要?jiǎng)澐謪^(qū)域的尺寸仍使用百分?jǐn)?shù)或px做單位
rem,em區(qū)別：rem,em都是順應(yīng)不同網(wǎng)頁(yè)字體大小展現(xiàn)而產(chǎn)生的。其中，em是相對(duì)其父元素，在實(shí)際應(yīng)用中相對(duì)而言會(huì)帶來(lái)很多不便；而rem是始終相對(duì)于html大小，即頁(yè)面根元素。
瀏覽器的默認(rèn)字體高度一般為16px，即1em:16px，但是 1:16 的比例不方便計(jì)算，為了使單位em/rem更直觀，CSS編寫(xiě)者常常將頁(yè)面跟節(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ì)算。
那么為什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？
因?yàn)橛行g覽器默認(rèn)的不是16px，或者用戶(hù)修改了瀏覽器默認(rèn)的字體大?。ㄒ?yàn)g覽器分辨率大小，視力，習(xí)慣等因素）。如果我們將其設(shè)置為10px，一定會(huì)影響在這些瀏覽器上的效果，所以最好用絕大多數(shù)用戶(hù)默認(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)問(wè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)字體的大小。
移動(dòng)端彈性布局流行起來(lái)的原因歸根結(jié)底是rem單位對(duì)于（根據(jù)屏幕尺寸）調(diào)整頁(yè)面的各元素的尺寸、文字大小時(shí)比較好用。其實(shí)，使用vw、vh等后起之秀的單位，可以實(shí)現(xiàn)完美的流式布局（高度和文字大小都可以變得“流式”），彈性布局就不再必要了。
響應(yīng)式和彈性布局之間的對(duì)比：
響應(yīng)式布局：改變?yōu)g覽器寬度，“布局”會(huì)隨之變化，不是一成不變的，例如導(dǎo)航欄在大屏幕下是橫排，在小屏幕下是豎排，在超小屏幕下隱藏為菜單，也就是說(shuō)如果有足夠的耐心，在每一種屏幕下都應(yīng)該有合理的布局，完美的效果。
rem布局：改變?yōu)g覽器寬度，頁(yè)面所有元素的高寬都等比例縮放，也就是大屏幕下導(dǎo)航是橫的，小屏幕下還是橫的只不過(guò)變小了。
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
display: flex;
flex-direction: column;
height: 100vh;
}
#box1{
width: 100vw;
height: 50px;
background-color: brown;
}
#box2{
flex:1;
background-color: rgb(42, 58, 165);
overflow-y: auto;
}
#box3{
width: 100vw;
height: 50px;
background-color: rgb(52, 165, 42);
}
p{
height: 1000px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"><p>45343</p></div>
<div id="box3"></div>
</body>
</html>
