1、響應(yīng)式設(shè)計(jì)是什么？
響應(yīng)式網(wǎng)站設(shè)計(jì)（Responsive WEB desgin）是一個(gè)網(wǎng)絡(luò)頁面設(shè)計(jì)布局，頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的相應(yīng)和調(diào)整。
描述響應(yīng)式界面最著名的一句話就是：content is like water.
大白話就是：如果將屏幕看作容器，那么內(nèi)容就像是水一樣。

響應(yīng)式網(wǎng)站常見特點(diǎn)：
同時(shí)適配PC+平板+手機(jī)等。
標(biāo)簽導(dǎo)航在接近手持終端設(shè)備時(shí)改變?yōu)榻?jīng)典的抽屜式導(dǎo)航。
網(wǎng)站的布局會根據(jù)視口來調(diào)整模塊的大小和位置。

2、實(shí)現(xiàn)方式
響應(yīng)式設(shè)計(jì)的基本原理是通過媒體查詢檢測不同的設(shè)備屏幕尺寸做處理，為了處理移動(dòng)端，頁面頭部必須有meta聲明viewport。

屬性對應(yīng)如下：
width=device-width：是自適應(yīng)手機(jī)屏幕的尺寸寬度
maximum-scale：是縮放比例的最大值。
inital-scale：是縮放的初始化。
user-scalable：是用戶的可以縮放的操作。

實(shí)現(xiàn)響應(yīng)式布局的方式有如下：
媒體查詢
百分比
vm/vh
rem

媒體查詢：
CSS3中的增加了更多的媒體查詢，就像if條件表達(dá)式一樣，我們可以設(shè)置不同類型的媒體條件，并根據(jù)對應(yīng)的條件，給相應(yīng)符合條件的媒體調(diào)用相對應(yīng)的樣式表。
使用@Media查詢，可以針對不同的媒體類型定義不同的樣式，如：

當(dāng)視口在375px-600px之間，設(shè)置特定的字體大小18px

通過媒體查詢，可以通過給不同的分辨率的設(shè)備編寫不同的樣式來實(shí)現(xiàn)響應(yīng)式布局，比如我們?yōu)椴煌姆直媛实钠聊?#xff0c;設(shè)置不同的背景圖片。
比如給小屏幕手機(jī)設(shè)置@2x圖，為大屏幕手機(jī)設(shè)置@3x圖，通過媒體查詢就能很方便的實(shí)現(xiàn)。

百分比：通過百分比單位%，來實(shí)現(xiàn)響應(yīng)式的效果。
比如當(dāng)瀏覽器的寬度或者高度發(fā)生變化時(shí)，通過百分比單位，可以使得瀏覽器中的組件的寬和高隨著瀏覽器的變化而變化，從而實(shí)現(xiàn)響應(yīng)式的效果。
height、width屬性是百分比依托于父標(biāo)簽的寬高，但是其他盒子屬性則不完全依賴父元素。
子元素的top/left和bottom/right如果設(shè)置百分比，則相對于直接非static定位（默認(rèn)定位）的父元素的高度/寬度
子元素的padding如果設(shè)置百分比，不論垂直方向或者是水平方向，都相對于直接父親元素的width，而于父親元素的height無關(guān)。
子元素的margin如果設(shè)置成百分比，不論是垂直方向還是水平方向，都相對于直接父親元素的width
border-radius不一樣，如果設(shè)置border-radius為百分比，則是相對于自身的寬度.
可以看到每個(gè)屬性都使用百分比，會造成布局的復(fù)雜度，所以不建議使用百分比來實(shí)現(xiàn)響應(yīng)式。

vm/vh
vm表示相對于視圖窗口的寬度，vh表示相對于視圖窗口高度。任意層級元素，在使用vm單位的情況下，1vm都等于視圖寬度的百分之一。
與百分比布局很相似，在以前的文章提過與%的區(qū)別，這里就不展開述說。

rem：rem是相對于根元素HTML的font-size屬性，默認(rèn)情況下瀏覽器字體大小為16px，此時(shí)1rem=16px
可以利用前面提到的媒體查詢，針對不同設(shè)備分辨率改變font-size的值。如下:

為了更準(zhǔn)確監(jiān)聽設(shè)備可視窗口變化，我們可以在css之前插入scrpit標(biāo)簽，內(nèi)容如下：

無論設(shè)備可視窗口如何變化，始終設(shè)置rem為width的1/10；
實(shí)現(xiàn)了百分比布局
除此之外，可以利用主流的ui框架，如element-ui，antd提供的柵格布局實(shí)現(xiàn)響應(yīng)式。

小結(jié)：
響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)通常會從以下幾方面思考：
彈性盒子（包括圖片、表格、視頻）和媒體查詢技術(shù)
使用百分比布局創(chuàng)建流式布局的彈性UI，同時(shí)使用媒體查詢限制元素的尺寸和內(nèi)容變更范圍
使用相對單位使得內(nèi)容自適應(yīng)調(diào)節(jié)
選擇斷點(diǎn)，針對不同斷點(diǎn)實(shí)現(xiàn)不同布局和內(nèi)容展示。

3、總結(jié)
響應(yīng)式布局有點(diǎn)可以看到：
面對不同分辨率設(shè)備靈活性強(qiáng)
能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點(diǎn)：
僅適用布局、信息、框架并不復(fù)雜的部門類型網(wǎng)站
兼容各種設(shè)備工作量大、效率低下
代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長。
其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果
一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況。