響應式布局可以讓網站同時適配不同分辨率和不同的手機端，讓客戶有更好的體驗。
方案一：百分比布局
利用對屬性設置百分比來適配不同屏幕，注意這里的百分比是相對於父元素； 能夠設置的屬性有 width、height、padding、margin，其他屬性比如 border、font-size 不能用百分比設置的，先看一個簡單例子：
頂部是利用設置圖片 width: 50%來適應不同的分辨率，由於原始圖片高度不同，所以第一張圖片頂部會有空白，這種情況最好兩張圖片寬高保持一致，如果使用強制高度統一，會導致圖片變形；
注意：當屏幕大於圖片的寬度時，會進行拉伸；解決拉伸方法就是改為
max-width: 50%，但當屏幕大於圖片的寬度時，兩邊會有空白。欄目是利用設置單欄目 width: 25%來適應不同的分辨率。
由於沒辦法對 font-size 進行百分比設置，所以用的最多就是對圖片和大塊布局進行百分比設置。
方案二：使用媒體查詢 (CSS3 @media 查詢)
利用媒體查詢設置不同分辨率下的css 樣式，來適配不同屏幕，先看一個簡單例子：
三個不同分辨率下顯示對應的背景色。
媒體查詢相對於百分比布局，可以對布局進行更細致的調整，但需要在每個分辨率下面都寫一套 css 樣式；分辨率拆分可視項目具體情況而定。
注意：IE6、7、8 不支持媒體查詢。
方案三.rem 響應式布局
當前頁面中元素的rem 單位的樣式值都是針對於html 元素的font-size 的值進行動態計算的，所以有兩種方法可以達到適配不同屏幕：
第一種利用媒體查詢，在不同分辨率下給 html 的 font-size 賦值。第二種利用 js 動態計算賦值，詳細代碼如下圖：
缺點就是打開頁面時候，元素大小會有一個變化過程。
方案四.vw 響應式布局
根據 PSD 文件寬度或高度作為標准，元素單位 px 轉換為 vw 或 vh，比如font-size: 12px，PSD 文件寬度 375，轉換公式 12 * 100 / 375，則樣式改為font-size: 3.2vw，下面是我經常使用的工具，有利於提高轉換效率。
現階段手機端用的最多就是這個方法，能保持不同屏幕下元素顯示效果一致， 也不用寫多套樣式。
方案五.flex 彈性盒子布局
利用 flex 屬性來適配不同屏幕，下圖利用簡單的屬性實現欄目響應式
