（譯者注：全部按照教程的**，並不能實現**，我除錯之後發了全部**出來。ps：沒有使用，谷歌給的例子訪問不到。）
每個裝置都有自己獨特的優勢和限制，要讓這個網頁在眾多的不同的顯示裝置中被接受，作為一名web開發者，你要盡力讓這個頁面支援所有裝置。
目錄：前一篇教程已經把頁面的基本內容填充好了，這一篇我們會將裝飾它，並且讓它做一系列不同解析度的裝置中都能夠漂亮地顯示。
依照移動優先的開發原則，我們從窄屏入手——類似手機——並且先建立起這方面的概念，然後再逐漸向大螢幕擴充套件。我們可以通過判斷視窗寬度來實現不同的設計和布局。
早先我們建立了一對不同級別的設計定義內容如何來顯示，現在我們需要頁面適應不同的布局。我們需要設定一下斷點——用與決定何時改變布局和風格——基於內容如何來適應不同的螢幕解析度。
使用viewport
從窄屏開始然後逐級擴充套件
根據斷點觸發讓內容去適應解析度
根據主要斷點建立高階別布局版本
就算是最簡單的頁面，也要加入viewport標籤，它是你開發多裝置支援經驗的關鍵。沒有它，你的**是不能在移動裝置上有個好的表現的。
引入viewport會讓瀏覽器認為頁面需要縮放以適應螢幕。有很多種配置方案，我們預設這樣設定：（在
做這個教程就是用來教web開發者關於如何積累這些技術和經驗的。
你可以學到以下幾點
.移動行業領先者
它們太普及了！
資料來自
statscounter
國家
桌面分享
平板分享
手機分享
印度
32%1%
67%
大不列顛
69%13%
18%
美國69%
9%
22%
中國86%
4%
10%
還是需要腳部資訊的~
web前端開發之響應式布局
即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap.或m.彈性布局是css3引入的強大的布局方式，用來替代以前we...
移動Web開發 響應式布局（一）
就是使用 查詢針對不同寬度的裝置進行布局和樣式的設定，從而適配不同裝置的目的。裝置劃分 尺寸區間 超小螢幕 手機 768px 小屏裝置 平板 768px 992px 中等螢幕 桌面顯示器 992px 1200px 寬屏裝置 大桌面顯示器 1200px 響應式需要乙個父級做為布局容器，來配合子級元素實...
《高效能響應式Web開發實戰》一1 4 定義響應式
我們有沒有可能採用一種最直接的方式，用一句話闡述響應式在前端開發中究竟代指哪些技術？如果非要往前追溯對響應式技術的定義，一定要談alistapart 3 上的被奉為經典的兩篇文章，即 responsive web design 4 和 a dao of web design 5 在 responsi...