文章包含個人了解，錯誤請指出。
目錄
響應式布局的方法
媒體查詢media
使用方法
優點
缺點
百分比%
使用方法
優點
缺點
vw/vh
使用方法
優點
缺點
em/rem
使用方法
優點
缺點
彈性布局flex
響應式布局的方法
媒體查詢media
使用方法
使用
@media
媒體查詢可以針對不同的媒體類型定義不同的樣式，特别是響應式頁面，可以針對不同螢幕的大小，編寫多套樣式，進而達到自适應的效果。
比如我們可以通過視窗大小的不同來模拟其他裝置，當更換裝置的時候進行背景色以及文字的變換。
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: gray;
color: #fff;
text-align: center;
padding-top: 100px;
}
h1 {
display: none;
}
/* smartphone */
@media(max-width:500px) {
/* 低于500px時産生效果 */
body {
background-color: red;
}
.Smartphone h1 {
display: block;
}
}
/* table */
@media(min-width:501px) and (max-width:768px) {
/* 501到768範圍内産生效果 */
body {
background-color: blue;
}
.Table h1 {
display: block;
}
}
@media(min-width:761px) and (max-width:1200px) {
/* 761到1200内産生效果 */
body {
background-color: green;
}
.Normal h1 {
display: block;
}
}
@media(min-width:1201px) {
/* 高于1201産生效果 */
body {
background-color: brown;
}
.landscape h1 {
display: block;
}
}
</style>
</head>
<body>
<div class="Normal">
<h1>
Normal
</h1>
</div>
<div class="Table">
<h1>
Table
</h1>
</div>
<div class="Smartphone">
<h1>
Smartphone
</h1>
</div>
<div class="landscape">
<h1>
landscape
</h1>
</div>
</body> 
優點
可以根據不同裝置的分辨率進行相應的樣式轉換。
缺點
樣式添加繁瑣，每一次修改都需要單獨寫一套樣式。
百分比%
使用方法
當浏覽器的寬度或者高度發生變化時，通過百分比機關，通過百分比機關可以使得浏覽器中的元件的寬和高随着浏覽器的變化而變化，進而實作響應式的效果。
<style>
* {
padding: 0px;
margin: 10%;
}
#div1 {
width: 100%;
height: 300px;
background-color: green;
}
#div1 div {
width: 80%;
height: 100px;
background-color: red;
}
#div2 {
width: 100%;
height: 300px;
background-color: red;
}
#div2 div {
width: 80%;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="div1">
<div></div>
<div></div>
</div>
<div id="div2">
<div></div>
<div></div>
</div>
</body> 
進行寬高百分比設定時，是根據父元素的寬高設定的。
優點
頁面中的各元素的寬高都會依照百分比進行變化。
缺點
計算困難 需要計算相對應的百分比值，最主要的是百分比往往隻用于設定狂高，
在設定其他元素時，根據的對象百分比不同，比如我們在設定内外邊距的時候，是根據
父級的寬度設定的，更有像border-radius屬性，如果設定border-radius為百分比，則是相對于自身的寬度的百分比進行設定的。
vw/vh
使用方法
vw是将寬度設定成100份兒，給予指定份數設定寬度，vh是将高度設定成100份兒，給予指定份數設定高度。
優點
與百分比布局很相似，但是更好用，不同屬性的vh，vw效果都是一樣的，都是目前視窗的寬度高度的一份兒，可以直接設定全滿的高度（100vh），這是百分比做不到的，也可以用于設定字型大小。
缺點
沒特别大的缺點。
em/rem
使用方法
em設定字型是根據父級字型的大小設定倍數，rem設定字型是根據固定的根元素字型大小設定倍數。
em，rem通常用于設定字型大小。
<style>
* {
padding: 0px;
margin: 0px;
}
.a {
height: 10em;
/* 預設的字型大小16px 10em也就是寬高為160px */
width: 10em;
background-color: red;
}
.b {
height: 300px;
/* 設定寬高為300px */
width: 300px;
/* 我們這裡修改了字型的大小為20px */
font-size: 20px;
margin: 1em;
/* 20px */
background-color: blue;
}
.c {
height: 10em;
/* 根據父級元素字型設定大小 父級為20px 10em 也就是 寬高為200px */
width: 10em;
background-color: green;
}
</style>
</head>
<body>
<div class="a">
</div>
<div class="b">
<div class="c"></div>
</div>
</body> 對于em機關 是根據父元素的字型大小的倍數設定的，，
父元素設定為32px，子元素設定為1em，那麼結果就是32px（父元素修改成了32px），
寬高設定也是如此，但還是有些屬性不同，比如内邊距 設定成1em，他是根據最近的字型大小為依據的，他不用必須是父級，同級對字型的修改，也可以用在邊距上。
什麼意思呢
比如 父元素為2em（32px），子元素又設定了字型大小為1em（16px），子元素邊距設定成1em 邊距就是16px，子元素如果設定成20px，子元素邊距1em，就是20px，他是根據最近的設定的字型大小為依據的。
rem在這裡就不做示範了 他是根據根元素html設定的字型大小 為倍率進行顯示，邊距同樣也是根據根元素大小進行顯示，這一點rem要好很多，rem的使用體驗要比em好很多，因為他們都有一個統一的倍率，不用單獨計算。
接下裡我們示範一下 rem是如何實作響應式結構的
<style>
html {
font-size: 1vw;
/* 視窗最大為1920 分成100份 一份就是19.2px */
}
.a {
height: 10rem;
/* 視窗最大化 長寬為192px */
width: 10rem;
background-color: red;
}
.b {
height: 100rem;
width: 100rem;
background-color: blue;
}
.c {
height: 10rem;
width: 10rem;
background-color: green;
}
</style>
</head>
<body>
<div class="a">
</div>
<div class="b">
<div class="c"></div>
</div>
</body> rem的元素都是根據 根元素的字型大小改變的，想要完成響應式布局，我們隻需要讓根元素字型大小變成響應式跟随視窗大小的改變就好。