響應式佈局

Responsive design，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

響應式佈局不是趨勢？

我們看到大型電商，直播平臺，問答類網站，都會開發一套PC端和一套獨立的移動端，比如 某東桌面端 (某東移動端)[https://m.jd.com]，還有一些小型網站…

1. .響應式設計僅是改善移動體驗並沒達到最優化
   http://www.mdcraftbeerfestival.com/
   
   
   這個網站設計是非常漂亮，有視覺衝擊，介面簡潔美觀；但是大部分網站都是移動端明顯將在一些內容隱藏，對移動端是很不友好，有些甚至可能是產品，而且可以看到可視區域變小，字型都擠一起，頁面拉長，排版順序錯亂。
2. 程式碼相對複雜，載入慢
   我們可以看到程式碼很多都是重複的，針對性不強；要相容各種終端，開發效率低了很多；寫很多冗餘的程式碼，使整體網頁的體積變大，應用在移動裝置上就會帶來嚴重的效能問題。載入慢，使用者體驗就是個問題了。
3. 網站搜素權重是個問題
   百度對移動網站和電腦網站的關鍵詞處理策略也不相同，而對於響應式的方案，不同終端訪問到的網頁程式碼是一樣的，這樣就不能在電腦端和移動端設定不同的關鍵詞。
4. 折衷性質的設計解決方案
   多方面因素影響而達不到最佳效果，一定程度上改變了網站原有的佈局結構，會出現使用者混淆的情況.

響應式佈局依舊是前端必要的

應用

1. 在大型電商網站，基本都是特定開發一套適配移動端的，因為移動裝置的普遍，很多人都是直接用手機進行購物。所以需要對移動端很友好，而且需要的互動操作也比較多。但是，響應式現在依舊是趨勢，上面只是響應式佈局的缺點和侷限性。不是它不應存在。
2. 響應式佈局常用於企業的官網、部落格、新聞資訊型別網站，這些網站以瀏覽內容為主，沒有複雜的互動。比如該響應式網站：https://colly.com/
3. 針對一些新建站的網站，要求適配移動端，所以選擇響應式設計，就一套頁面相容各種終端，很靈活
4. 解決了裝置之間的差異化展示，能夠快捷解決多裝置顯示適應問題。
   所以，響應式設計依舊是有很多應用場景，我們要根據需求來選擇，選擇真正適合我們網站的佈局

原則

1. 移動裝置優先：在設計初期就要考慮頁面如何在多終端顯示
2. 漸進增強：充分發揮硬體裝置的最大功能。例如IE6、7、8不支援css3的屬性，需要用js實現響應式佈局，但是對於高階瀏覽器，我們就可以使用css3來實現，充分發揮瀏覽器的效能（你的瀏覽器越強，你看到的效果就越好，使用者體驗越好。）

優點

1. 面對不同解析度裝置靈活性強。
2. 能夠快捷解決多裝置顯示適應問題。

缺點

1. 相容各種裝置工作量大，效率低下。
2. 程式碼累贅，會出現隱藏無用的元素，載入時間加長。

原理

1. 媒體查詢: 查詢媒介，查詢到當前螢幕(媒介媒體)的寬度，針對不同的螢幕寬度設定不同的樣式來適應不同螢幕。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。簡單說，你可以設定 不同螢幕下面的不同的樣式，達到適配不同的螢幕的目的。
2. 方式： 通過查詢screen的寬度來指定某個寬度區間的網頁佈局。
   超小螢幕 （移動裝置） w<768px
   小屏裝置 768px-992px 768 <= w <992
   中等螢幕 992px-1200px 992 =< w <1200
   寬屏裝置 1200px以上 w>=1200

自適應佈局

自己根據螢幕寬度的改變而改變（典型的寫法不需要media判斷，直接讓每個元素通過相對的寬度，比如百分比、vh、em 、rem等來改變容器的大小，文字的大小）。自適應佈局等於使用固定分割點來進行佈局。
比如現在移動端主流的裝置是分割點，我們可以使用less等根據各種主流裝置來實現自適應佈局

@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;

總結

根據需求再選擇適合我們網站的佈局，技術才是最優的。響應式佈局依舊是前端工程師必須掌握的。使用響應式我們要根據其原則，揚長避短。