響應式布局也被應用到網站前端開發中，在國內這一詞想必是非常火吧，那網站為什么要使用響應式布局呢？原因和其他創意性的生活用品基本上是一樣的，處于對人力物力財力的節省和對生活富有詩意的一種追求。在人力物力和財力有限的情況下，一個網站既要功能完善，又要跟得上移動互聯網的潮流（不是瞎跟風啊），那么同一套后臺系統、數據庫和前端代碼，怎樣才能滿 足用戶在不通場景（廁所、超市、商場、被窩）不同設備（Iphone、ipad、電視、小米、三星、華為、HTP、諾基亞等等）上都能體驗到最佳的產品體 驗和功能呢？以往（在響應式概念誕生以前）的網站或者應用是怎么處理的呢？
最常見的辦法就是基類（最常用的網站布局） 擴展類（幾種不同的網站布局類）來實現不同的布局。<!–使用說明：網站基本布局，使用class="layout";使用ipad訪問時，追加class="layout-ipad";使用iphone訪問時，追加class="layout-iphone";使用iphone橫屏訪問時，追加class="layout-iphone-h";使用移動設備分辨率小于320px*480px訪問時，追加class="layout-miscreen";–><div><header>header</header><section>main</section><footer>footer</footer></div>針對不同布局編寫不同的css代碼，通過js判斷設備、不同分辨率調用不同的布局樣式，從而實現同一套前端Html代碼適配不同設備和場景，給用戶帶來最佳的操作體驗。自從響應式布局的概念誕生以來，它便火了起來。
官方是這么定義響應式布局設計的：響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
這個概念是為解決移動互聯網瀏覽而誕生的。響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用大勢所趨來形容也不為過。
用一句話來說：使用同一套Html代碼來適配不同設備和滿足不同場景不同用戶使用。
關鍵專業術語：Media Query（css3媒介查詢）語法結構及用法：

1234567891011121314

@media?設備名?only?（選取條件）?not?（選取條件）?and（設備選取條件），設備二{sRules}實際應用一?判斷設備橫豎屏：/*?這是匹配橫屏的狀態，橫屏時的css代碼?*/@media?all?and?(orientation?:landscape){}/*?這是匹配豎屏的狀態，豎屏時的css代碼?*/@media?all?and?(orientation?:portrait){}實際應用二?判斷設備類型：@media?X?and?(min-width:200px){}X為設備類型》比如print/screen/TV等等實際應用三?判斷設備寬高：/*?寬度大于600px小于960之間時，隱藏footer結構?*/@media?all?and?(min-height:640px)?and?(max-height:960px){footer{display:none;}}

實際應用四 判斷設備像素比：

12345678910111213141516171819

/*?像素比為1時，頭部顏色為綠色?*/.header?{?background:red;display:block;}或@media?only?screen?and?(-moz-min-device-pixel-ratio:?1),?only?screen?and?(-o-min-device-pixel-ratio:?1),?only?screen?and?(-webkit-min-device-pixel-ratio:?1),?only?screen?and?(min-device-pixel-ratio:1)?{.header{background:green;}?}/*?像素比為1.5時，頭部背景為紅色?*/@media?only?screen?and?(-moz-min-device-pixel-ratio:?1.5),?only?screen?and?(-o-min-device-pixel-ratio:?1.5),?only?screen?and?(-webkit-min-device-pixel-ratio:?1.5),?only?screen?and?(min-device-pixel-ratio:1.5)?{.header{background:red;}?}/*像素比為2，頭部背景為藍色?*/@media?only?screen?and?(-moz-min-device-pixel-ratio:?2),?only?screen?and?(-o-min-device-pixel-ratio:?2),?only?screen?and?(-webkit-min-device-pixel-ratio:?2),?only?screen?and?(min-device-pixel-ratio:2){.header{background:blue;}?}

關于設備像素比， 您可以參考：HOW TO UNPREFIX -WEBKIT-DEVICE-PIXEL-RATIO?Device pixel density tests What's My Device Pixel Ratio?PPI、設備像素比devicePixelRatio簡單介紹、 在各種高分辨率設備中使用像素開發中，可使用Chrome emulation模擬移動設備的真實具體參數值。關于Chrome Emulation可參考之前 《Chrome Emulation-移動設備特性隨意配》一文。了解了這些，那么在國內到底有多少網站有應用到響應式布局呢？有一淘、淘寶、優酷等等。國外響應式網站非常多了，個人親身感受和熟悉的最典型網站就是WordPress系統了。還是開頭說的那樣，響應式布局不是趕潮流，而是有這樣的一批用戶需要——處于為用戶在不同的場景（拉粑粑的時候）不同的設備（某國產山寨主流機））瀏覽網 頁時考慮的目的，使得他們能像操作PC端網頁一樣的自然去操作移動設備中的網頁，甚至是TV上的應用或者網站。這樣響應式才會做的更合理更人性化。

總結

以上是生活随笔為你收集整理的关于CSS3实现响应式布局的一些概念和术语的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。