首先兩種的方式的解決問題是不一樣的弄贿。
寬度自適應
是為了解決如何才能在不同大小的設備上呈現(xiàn)相同的網(wǎng)頁瓮顽。手機的屏幕比較小翔横，寬度通常在500像素以下癞谒，pc的像素一般在1000像素以上藤滥。因此就有人想出了一個辦法鳖粟，能不能"一次設計，普遍適用"拙绊，讓同一張網(wǎng)頁自動適應不同大小的屏幕牺弹，根據(jù)屏幕的寬度，自動調(diào)節(jié)網(wǎng)頁的內(nèi)容大小时呀，但是無論怎么樣子张漂，他們的主體的內(nèi)容和布局沒有變化。核心是使用rem代替絕對單位px谨娜。
自適應還是暴露出一個問題航攒，如果屏幕太小，即使網(wǎng)頁能夠根據(jù)屏幕大小進行適配趴梢，但是會感覺在小屏幕上查看漠畜，內(nèi)容過于擁擠，響應式正是為了解決這個問題而衍生出來的概念坞靶。它可以自動識別屏幕寬度憔狞、并做出相應調(diào)整的網(wǎng)頁設計，布局和展示的內(nèi)容可能會有所變動彰阴。
響應式Web設計
讓一個網(wǎng)站同時適配多種設備和多個屏幕瘾敢，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境(屏幕大小、輸入方式尿这、設備/瀏覽器能力)而變化簇抵。核心是使用媒體查詢相對于視口大小應用CSS規(guī)則。
響應式的概念應該覆蓋了自適應（因為可以使用rem代替絕對單位px+媒體查詢）射众，而且涵蓋的內(nèi)容更多碟摆。
自適應實現(xiàn)方式
1. 首先在網(wǎng)頁代碼的頭部，加入一行viewport元標簽叨橱。
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是網(wǎng)頁默認的寬度和高度典蜕，上面這行代碼的意思是断盛，網(wǎng)頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0愉舔，即網(wǎng)頁初始大小占屏幕面積的100%郑临。
2. 使用rem代替絕對單位px
動態(tài) rem是針對移動端頁面的適配方法。例如手機淘寶 在移動端寬度不適合再用固定寬度px屑宠，我們希望整體等比縮放。
rem是CSS3新增的一個相對單位（root em仇让，根em）典奉，相對的只是HTML根元素（1rem=html font size）。通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小丧叽，又可以避免字體大小逐層復合的連鎖反應（em也是相對長度單位卫玖，但會繼承父級元素的字體大小）踊淳。
注意：rem是相對于根節(jié)點html的font-size的倍數(shù)假瞬，瀏覽器對font-size值有限制，一般font-size最小值默認為12迂尝。
動態(tài)rem方案
- meta:vp禁止縮放
<meta name="viewport" content="width=device-width, height=device-height, inital-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> - document.documentElement.clientWidth動態(tài)獲取頁面寬度width
- 賦給html的font-size脱茉，即拼接成
html{font-size:'+ width/10 +'px;} - 10rem==頁面寬度width
- 所有單位都用rem == 所有長度都以頁面的寬度為基準
示例
3. 使用視口單位(Viewport units) vw／vh
rem單位來實現(xiàn)適配，但是它還需要內(nèi)嵌一段腳本去動態(tài)計算跟元素大小垄开。
那有沒有一個單位不需要JS和CSS耦合在一起的單位琴许？答案是有的，就是vw／vh溉躲。
視口單位(Viewport units)
視口單位中的“視口”榜田，桌面端指的是瀏覽器的可視區(qū)域；移動端指的就是Viewport中的Layout Viewport锻梳。
| 單位 | 解釋 |
|---|---|
| vw | 1vw = 視口寬度的1% |
| vh | 1vh = 視口高度的1% |
| vmin | 選取vw和vh中最小的那個 |
| vmax | 選取vw和vh中最大的那個 |
vh/vw與%區(qū)別
vh/vw與%區(qū)別在于:
| 單位 | 依賴于 |
|---|---|
| % | 元素的祖先元素 |
| vh/vw | 視口的尺寸 |
自適應基礎上的響應式頁面
3. 媒體查詢
目前一般常見的實現(xiàn)響應式有兩種方法箭券，一種是利用媒體查詢，另外一種是bootstrap下的柵格布局疑枯。
媒體查詢辩块，即 @media 查詢，可以針對不同的屏幕尺寸設置不同的樣式荆永，當你重置瀏覽器大小的過程中庆捺，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。
媒體查詢示例
如果頁面寬度小于 300 像素,則修改body的背景顏色為紅色:
@media screen and (max-width: 300px) {
body {
background-color:red;
}
}
如果頁面寬度大于 300 像素并且小于600像素屁魏，則修改body的背景顏色為綠色:
@media screen and (min-width: 300px) and (max-width:600px) {
body {
background-color:green;
}
}
如果頁面寬度大于 600 像素滔以，則修改body的背景顏色為藍色:
@media screen and (min-width: 600px) {
body {
background-color:blue;
}
}
還有一種響應式是使用絕對寬度px + 媒體查詢，那么對于寬度不同的手機氓拼，顯示頁面內(nèi)容的寬度仍然一樣你画，內(nèi)容居中抵碟，只是兩邊留白寬度不同。
4. 使用Flex彈性布局
布局的傳統(tǒng)解決方案坏匪，基于盒狀模型拟逮，依賴 display屬性 + position屬性 + float屬性。
Flex是Flexible Box的縮寫适滓，意為”彈性布局”敦迄，用來為盒狀模型提供最大的靈活性∑炯＃可以簡便罚屋、完整、響應式地實現(xiàn)各種頁面布局嗅绸。
具體用法
