一、是什么
響應式網站設計（Responsive Web design）是一種網絡頁面設計布局，頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整
描述響應式界面最著名的一句話就是“Content is like water”
大白話便是“如果將屏幕看作容器，那么內容就像水一樣”
響應式網站常見特點：
-
同時適配PC + 平板 + 手機等
-
標簽導航在接近手持終端設備時改變為經典的抽屜式導航
-
網站的布局會根據視口來調整模塊的大小和位置
二、實現方式
響應式設計的基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理，為了處理移動端，頁面頭部必須有meta聲明viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
屬性對應如下：
-
width=device-width: 是自適應手機屏幕的尺寸寬度
-
maximum-scale:是縮放比例的最大值
-
inital-scale:是縮放的初始化
-
user-scalable:是用戶的可以縮放的操作
實現響應式布局的方式有如下：
- 媒體查詢
- 百分比
- vw/vh
- rem
媒體查詢
CSS3中的增加了更多的媒體查詢，就像if條件表達式一樣，我們可以設置不同類型的媒體條件，並根據對應的條件，給相應符合條件的媒體調用相對應的樣式表
使用@Media查詢，可以針對不同的媒體類型定義不同的樣式，如：
@media screen and (max-width: 1920px) { ... }
當視口在375px - 600px之間，設置特定字體大小18px
@media screen (min-width: 375px) and (max-width: 600px) {
body {
font-size: 18px;
}
}
通過媒體查詢，可以通過給不同分辨率的設備編寫不同的樣式來實現響應式的布局，比如我們為不同分辨率的屏幕，設置不同的背景圖片
比如給小屏幕手機設置@2x圖，為大屏幕手機設置@3x圖，通過媒體查詢就能很方便的實現
百分比
通過百分比單位 " % " 來實現響應式的效果
比如當瀏覽器的寬度或者高度發生變化時，通過百分比單位，可以使得瀏覽器中的組件的寬和高隨着瀏覽器的變化而變化，從而實現響應式的效果
height、width屬性的百分比依托於父標簽的寬高，但是其他盒子屬性則不完全依賴父元素：
-
子元素的top/left和bottom/right如果設置百分比，則相對於直接非static定位(默認定位)的父元素的高度/寬度
-
子元素的padding如果設置百分比，不論是垂直方向或者是水平方向，都相對於直接父親元素的width，而與父元素的height無關。
-
子元素的margin如果設置成百分比，不論是垂直方向還是水平方向，都相對於直接父元素的width
-
border-radius不一樣，如果設置border-radius為百分比，則是相對於自身的寬度
可以看到每個屬性都使用百分比，會照成布局的復雜度，所以不建議使用百分比來實現響應式
vw/vh
vw表示相對於視圖窗口的寬度，vh表示相對於視圖窗口高度。任意層級元素，在使用vw單位的情況下，1vw都等於視圖寬度的百分之一
與百分比布局很相似，在以前文章提過與%的區別，這里就不再展開述說
rem
在以前也講到，rem是相對於根元素html的font-size屬性，默認情況下瀏覽器字體大小為16px，此時1rem = 16px
可以利用前面提到的媒體查詢，針對不同設備分辨率改變font-size的值，如下：
@media screen and (max-width: 414px) {
html {
font-size: 18px
}
}
@media screen and (max-width: 375px) {
html {
font-size: 16px
}
}
@media screen and (max-width: 320px) {
html {
font-size: 12px
}
}
為了更准確監聽設備可視窗口變化，我們可以在css之前插入script標簽，內容如下：
//動態為根元素設置字體大小
function init () {
// 獲取屏幕寬度
var width = document.documentElement.clientWidth
// 設置根元素字體大小。此時為寬的10等分
document.documentElement.style.fontSize = width / 10 + 'px'
}
//首次加載應用，設置一次
init()
// 監聽手機旋轉的事件的時機，重新設置
window.addEventListener('orientationchange', init)
// 監聽手機窗口變化，重新設置
window.addEventListener('resize', init)
無論設備可視窗口如何變化，始終設置rem為width的1/10，實現了百分比布局
除此之外，我們還可以利用主流UI框架，如：element ui、antd提供的柵格布局實現響應式
小結
響應式設計實現通常會從以下幾方面思考：
- 彈性盒子（包括圖片、表格、視頻）和媒體查詢等技術
- 使用百分比布局創建流式布局的彈性UI，同時使用媒體查詢限制元素的尺寸和內容變更范圍
- 使用相對單位使得內容自適應調節
- 選擇斷點，針對不同斷點實現不同布局和內容展示
三、總結
響應式布局優點可以看到：
- 面對不同分辨率設備靈活性強
- 能夠快捷解決多設備顯示適應問題
缺點：
- 僅適用布局、信息、框架並不復雜的部門類型網站
- 兼容各種設備工作量大，效率低下
- 代碼累贅，會出現隱藏無用的元素，加載時間加長
- 其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
- 一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況