大家好，我是IT修真院北京分院25期的學員，一枚正直純潔善良的web前端程序員
今天給大家分享一下，修真院官網css任務9，深度思考中的知識點——響應式的優點和缺點？？
1.背景介紹
隨著智能手機的迅速發展，大眾群體使用手機訪問互聯網的頻率已經大大提升。
手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都在1000像素以上（目前主流寬度是1366×768），有的還達到了2000像素。同樣的內容，要在大小迥異的屏幕上，都呈現出滿意的效果，并不是一件容易的事。
傳統的只能在pc端顯示的網頁，如何適應這個潮流，也成了人們開始關注和解決的問題。于是響應式布局的概念就被提出來了。
2.知識剖析
2.1什么是響應式
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過。
2.2響應式的優點
1.響應式設計可以向用戶提供友好的Web界面，同樣的布局，卻可以在不同的設備上有不同排版，這就是響應式最大的優點，現在技術發展日新月異，每天都會有新款智能手機推出。如果你擁有響應式Web設計，用戶可以與網站一直保持聯系，而這也是基本的也是響應式實現的初衷。
2.響應式在開發維護和運營上，相對多個版本成本會降低很多。也無須花大量的時間在網站的維護上
3.方便改動，響應式設計是針對頁面的，可以只對必要的頁面進行改動，其他頁面不受影響。
2.3響應式的缺點
1.為了適配不同的設備，響應式設計需要大量專門為不同設備打造的css及js代碼,這導致了文件增大，影響了頁面加載速度。
2.在響應式設計中，圖片、視頻等資源一般是統一加載的，這就導致在低分辨率的機子上，實際加載了大于它的顯示要求的圖片或視頻，導致不必要的流量浪費，影響加載速度；
3.局限性，響應式不適合一些大型的門戶網或者電商網站，一般門戶網或電商網站一個界面內容較多，對設計樣式不好控制，代碼過多會影響運行速度。
3.常見問題
如何實現響應式?
4.解決方案
1.流式布局
用靈活的網格搭建一個網站布局，它可以動態的調整以適應于任何寬度。網格布局使用相對長度單位.
這些相對長度多用于網格，諸如寬度，間距或是留白等屬性。
為了更好的控制流式布局，可以使用最小寬度（min-width），最大寬度（max-width），最小高度（min-height）和最大高度（max-height），把他們應用到容器元素(container)上。
vw:視窗寬度;vh:視窗高度;vmin:視窗最小尺寸;vmax:視窗最大尺寸;
2.媒體查詢 MediaQuery
自動探測屏幕寬度，然后加載相應的CSS樣式,為目標設備提供有針對性的樣式，在響應式設計中發揮作用。
@media all and (min-width: 800px) and (max-width: 1024px) {...}在搭建響應式網站時，應該可以適應各種不同視窗尺寸，而不需要考慮設備的分辨率。設置斷點只是在網站布局被破壞，看起來很怪或是內容無法顯示的時候才需要設置。
3.viewport
meta name="viewport" content="width=device-width, initial-scale=1.0"
width：控制 viewport 的大小，可以指定的一個值，如果 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放。
4.流式媒體
當視窗開始改變尺寸時，媒體大小并不總是做適當改變的。所以圖片，視頻以及其他媒體類型需要在視窗改變的情況下，按照比例改變大小。
通過使用最大寬度值為100%，是一個快速實現媒體按照比例縮放的方法。這樣做可以確保在視窗變小的情況下，任何媒體可以根據他的容器寬度，按照比例縮放。
img, video, canvas{max-width: 100%;
}
5.編碼實戰
demo1,2為響應式網站實例，demo3為響應式網站的設計
6.擴展思考
響應式和自適應的區別是什么？
簡而言之，響應式就相當于液體，它可以自動適應不同尺寸的屏幕。響應式根據目標設備自動改變風格如顯示類型,寬度、高度等，這能很好解決不同屏幕尺寸的顯示問題。而自適應設計是基于斷點使用靜態布局，一旦頁面被加載就無法再進行自動適應，自適應會自動檢測屏幕的大小來加載適當的工作布局，也就是說，當你要采用自適應設計網站時，你得設計多種常見的屏幕布局。顯然，自適應設計需要做更多的工作。而響應式設計可以更好地適應復雜的媒體設備要求，能很好地解決顯示和性能問題。
7.參考文獻
8.更多討論
視頻鏈接:密碼: 24kt
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧?！
