什麼是響應式佈局？
響應式佈局指的是同一頁面在不同螢幕尺寸下有不同的佈局。在行動互聯網高度發達的今天，我們在桌面瀏覽器上開發的網頁已經無法滿足在行動裝置上查看的需求。傳統的開發方式是PC端開發一套頁面，手機端再開發一套頁面。但這樣做非常麻煩，隨著不同的終端機越來越多，你需要開發多個不同版本的頁面。而使用響應式佈局只要開發一套就夠了。 EthanMarcotte在2010年5月提出了響應式佈局的概念，簡而言之，就是一個網站能夠相容於多個終端。
響應式開發與行動端與PC端分別開發的區別：響應式開發只編寫一套介面，透過偵測視口分辨率，針對不同客戶端在客戶端做程式碼處理，展現不同的佈局與內容。行動端與PC端分別開發，透過偵測視窗分辨率，來判斷目前存取的裝置是pc端、平板、手機， 從而請求伺服器，回傳不同的頁面。
響應式開發的原理？
響應式開發的原理是使用CSS3中的Media Query（媒體查詢）針對不同寬度的裝置設定不同的佈局和樣式，從而適配不同的裝置。
SS3 @media 查詢定義與使用：
使用@media 查詢，你可以針對不同的媒體類型定義不同的樣式。 @media 可以為不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
例如螢幕寬度小於500 像素則修改背景顏色(background-color)為紅色。
要實現響應式佈局，常用的方式有以下幾種：
（1）使用CSS 中的媒體查詢（最簡單）；
（2）使用JavaScript（使用成本比較高）；
（3）使用第三方開源框架（例如bootstrap，可以很好的支援各種瀏覽器）。
設定meta 標籤
首先，我們需要設定meta 標籤來告訴瀏覽器，讓視窗（網頁的視覺區域）的寬度等於裝置的寬度，並禁止使用者對頁面的縮放，如下所示：
<metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no>
設定視口時要注意，視窗就是網頁可見區域的尺寸，設定視口時只設定寬度就行，不用在乎高度，具體高度由網頁內容自動撐開。上面meta 標籤中內容的意思如下：
● viewport：即視口，表示網頁的可視區域；
●width：控制viewport 的大小，可以指定一個具體的值，例如600，也可以是由關鍵字組成的特殊值，例如device-width 就表示裝置的寬度；
●initial-scale：表示初始縮放比例，也就是頁面第一次載入時的縮放比例；
●maximum-scale：表示允許使用者縮放的最大比例，範圍從0 到10.0；
●minimum-scale：表示允許使用者縮放到最小比例，範圍從0 到10.0；
●user-scalable：表示使用者是否可以手動縮放，「yes」表示允許縮放，「no」表示禁止縮放。
媒體查詢
CSS 媒體查詢可以依照指定的條件，針對不同的媒體類型（screen print）定義不同的CSS 樣式，讓使用不同裝置的使用者都能得到最佳的體驗。
用HTML舉例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1><title>響應式頁面入門教學：AlbertYang</title><linkrel =stylesheethref=style.css><linkre l=stylesheethref=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssintegrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xb rigin=anonymous></head><body><header><ahref=#>AlbertYang</a><ul><li><ahref=#>首頁</a></li><li><ahref= #>部落格</a></li><li><ahref=#>聯絡我</a></li><li><ahref=#>留言板</a></li><li> <ahref=#>關於我</a> </li><li><ahref=#>照片牆</a></li></ul><div><inputtype=textplaceholder=Search><iclass=fafa-searcharia-hidden=true></i ></div></header><div><div><h2>響應式佈局</h2><p>響應式佈局指的是同一頁面在不同螢幕尺寸下有不同的佈局。傳統的開發方式是PC端開發一套，手機端再開發一套，而使用響應式佈局只要開發一套就夠了。響應式設計與自適應設計的區別：響應式開發一套介面，透過檢測視口分辨率，針對不同客戶端在客戶端做程式碼處理，來展現不同的佈局和內容；自適應需要開發多套介面，透過偵測視口分辨率，來判斷目前存取的裝置是pc端、平板、手機，從而請求服務層，回傳不同的頁面。 CSS3媒體查詢可以讓我們針對不同的媒體類型定義不同的樣式，當重置瀏覽器視窗大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。 </p><ahref=#>閱讀全文</a></div><imgsrc=img.png></div></body></html>
運行結果：
下面透過一個綜合的範例來示範響應式佈局的實作：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>響應式佈局</title><metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=no/><style>*{margin:0px;padding:0px;font-f amily:微軟雅黑;}#head,#foot,#main{height:100px;width:1200px;/*width:85%;*/background-color:goldenrod;tex t-align:center;font-size:48px;line-height:100px;margin:0auto;}#headdiv{display:none;font-size:20px;h eight:30px;width:100px;background-color:green;float:right;line-height:30px;margin-top:35px;}#headul{width:80%;}#headulli{width:20%;float: left;text-align:center;list-style:none;font-size:20px;}#main{he ight:auto;margin:10pxauto;overflow:hidden;}.left,.center,.right{height:600px;line-height:600px;float:left;width:20%;background-color:red}.center{ width:60%;border-left:10pxsolid#FFF;border-right:10pxso lid#FFF;box-sizing:border-box;}@mediaonlyscreenand(max-width:1200px){#head,#foot,#main{width:100%;}} @mediaonlyscreenand(max-width:980px){.right{display:none;}.left{width:30%;}.center{width:70%;border- right:hidden;}}@mediaonlyscreenand(max-width:640px){.left,.center,.right{width:100%;display:block;height:200px;line-height:200px;}.center{border: hidden;border-top:10pxsolid#FFFFFF;border-bottom:10pxso lid#FFFFFF;height:600px;line-height:600px;}#headul{display:none;}#headdiv{display:block;}}</style></head><body><div><headerid=head ><ul><li>header1</li><li>header2</li><li>header2</li><li>header2</li>< li>header2</li></ul><div>icon</div></header><sectionid=main><divclass=left>left</div><divclass=center>center</div><divclass =right>right</div></section><footerid=foot>footer</footer></div></body></html>運行結果：
