大家好荷荤，我是IT修真院北京分院25期的學員退渗，一枚正直純潔善良的web前端程序員
今天給大家分享一下，修真院官網(wǎng)css任務9蕴纳，深度思考中的知識點——響應式的優(yōu)點和缺點会油？？
1.背景介紹
隨著智能手機的迅速發(fā)展古毛，大眾群體使用手機訪問互聯(lián)網(wǎng)的頻率已經(jīng)大大提升翻翩。
手機的屏幕比較小，寬度通常在600像素以下稻薇；PC的屏幕寬度嫂冻，一般都在1000像素以上（目前主流寬度是1366×768），有的還達到了2000像素塞椎。同樣的內容桨仿，要在大小迥異的屏幕上，都呈現(xiàn)出滿意的效果案狠，并不是一件容易的事服傍。
傳統(tǒng)的只能在pc端顯示的網(wǎng)頁暇昂，如何適應這個潮流，也成了人們開始關注和解決的問題伴嗡。于是響應式布局的概念就被提出來了。
2.知識剖析
2.1什么是響應式
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念从铲，簡而言之瘪校，就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯(lián)網(wǎng)瀏覽而誕生的名段。響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗阱扬，而且隨著目前大屏幕移動設備的普及，用“大勢所趨”來形容也不為過伸辟。
2.2響應式的優(yōu)點
1.響應式設計可以向用戶提供友好的Web界面麻惶，同樣的布局，卻可以在不同的設備上有不同排版信夫，這就是響應式最大的優(yōu)點窃蹋，現(xiàn)在技術發(fā)展日新月異，每天都會有新款智能手機推出静稻。如果你擁有響應式Web設計表伦，用戶可以與網(wǎng)站一直保持聯(lián)系磅摹，而這也是基本的也是響應式實現(xiàn)的初衷。
2.響應式在開發(fā)維護和運營上，相對多個版本成本會降低很多勺拣。也無須花大量的時間在網(wǎng)站的維護上
3.方便改動，響應式設計是針對頁面的垦细，可以只對必要的頁面進行改動捺典，其他頁面不受影響。
2.3響應式的缺點
1.為了適配不同的設備大州，響應式設計需要大量專門為不同設備打造的css及js代碼,這導致了文件增大续语，影響了頁面加載速度。
2.在響應式設計中摧茴，圖片绵载、視頻等資源一般是統(tǒng)一加載的，這就導致在低分辨率的機子上苛白，實際加載了大于它的顯示要求的圖片或視頻娃豹，導致不必要的流量浪費，影響加載速度购裙；
3.局限性懂版，響應式不適合一些大型的門戶網(wǎng)或者電商網(wǎng)站，一般門戶網(wǎng)或電商網(wǎng)站一個界面內容較多躏率，對設計樣式不好控制躯畴，代碼過多會影響運行速度民鼓。
3.常見問題
如何實現(xiàn)響應式?
4.解決方案
1.流式布局
用靈活的網(wǎng)格搭建一個網(wǎng)站布局，它可以動態(tài)的調整以適應于任何寬度蓬抄。網(wǎng)格布局使用相對長度單位.
這些相對長度多用于網(wǎng)格丰嘉，諸如寬度，間距或是留白等屬性嚷缭。
為了更好的控制流式布局饮亏，可以使用最小寬度（min-width），最大寬度（max-width）阅爽，最小高度（min-height）和最大高度（max-height）路幸，把他們應用到容器元素(container)上。
vw:視窗寬度;vh:視窗高度;vmin:視窗最小尺寸;vmax:視窗最大尺寸;
2.媒體查詢 MediaQuery
自動探測屏幕寬度付翁，然后加載相應的CSS樣式,為目標設備提供有針對性的樣式简肴，在響應式設計中發(fā)揮作用。
@media all and (min-width: 800px) and (max-width: 1024px) {...}在搭建響應式網(wǎng)站時百侧，應該可以適應各種不同視窗尺寸砰识，而不需要考慮設備的分辨率。設置斷點只是在網(wǎng)站布局被破壞移层，看起來很怪或是內容無法顯示的時候才需要設置仍翰。
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%，是一個快速實現(xiàn)媒體按照比例縮放的方法路媚。這樣做可以確保在視窗變小的情況下黄琼，任何媒體可以根據(jù)他的容器寬度，按照比例縮放整慎。
img, video, canvas{max-width: 100%;
}
5.編碼實戰(zhàn)
demo1,2為響應式網(wǎng)站實例脏款，demo3為響應式網(wǎng)站的設計
6.擴展思考
響應式和自適應的區(qū)別是什么围苫？
簡而言之，響應式就相當于液體撤师，它可以自動適應不同尺寸的屏幕剂府。響應式根據(jù)目標設備自動改變風格如顯示類型,寬度、高度等剃盾，這能很好解決不同屏幕尺寸的顯示問題周循。而自適應設計是基于斷點使用靜態(tài)布局，一旦頁面被加載就無法再進行自動適應万俗，自適應會自動檢測屏幕的大小來加載適當?shù)墓ぷ鞑季郑簿褪钦f饮怯，當你要采用自適應設計網(wǎng)站時闰歪，你得設計多種常見的屏幕布局。顯然蓖墅，自適應設計需要做更多的工作库倘。而響應式設計可以更好地適應復雜的媒體設備要求，能很好地解決顯示和性能問題论矾。
7.參考文獻
8.更多討論
視頻鏈接:密碼: 24kt
技能樹.IT修真院
“我們相信人人都可以成為一個工程師教翩，現(xiàn)在開始，找個師兄贪壳，帶你入門饱亿，掌控自己學習的節(jié)奏，學習的路上不再迷萌蜓ィ”彪笼。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線蚂且，學習透明化配猫，成長可見化，師兄1對1免費指導杏死”靡蓿快來與我一起學習吧?！
