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

1234567891011121314

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

實(shí)際應(yīng)用四 判斷設(shè)備像素比：

12345678910111213141516171819

/*?像素比為1時(shí)，頭部顏色為綠色?*/.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時(shí)，頭部背景為紅色?*/@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，頭部背景為藍(lán)色?*/@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;}?}

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。