要是前邊的 CSS 部分你學(xué)得扎實(shí)，這部分基本就是看一眼就懂了，很簡單的一個事。就是比今天中午吃啥這個問題還簡單。額……我比喻的不恰當(dāng)哈，那樣就成了最難的問題了，算了，不比喻了，你們就領(lǐng)會精神就好了。
先解釋一下原理，就是你為一個元素設(shè)置多重的 CSS ，他們根據(jù)一定的規(guī)則，在不同的情況下分別起作用。這一定的條件一般都是指瀏覽器窗口的寬高范圍。
那么我們來做一個小的案例說明一下：
一個 Html 文件，里面一個方塊，就是這么簡單的內(nèi)容，這代碼大家都能輕松寫出來了吧？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>響應(yīng)式的小 Box</title>
<style>
#box {
width: 600px;
height: 300px;
margin: 50px auto;
background: blue;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>這個案例簡單吧，而且呢，這個 #box 在各種情況下顯示的都一樣，很好，很老實(shí)，但是只是個不聰明的乖寶寶而已。怎么讓它變得聰明起來，可以根據(jù)外界的變化隨機(jī)應(yīng)變呢？當(dāng)然不是喂他喝腦白金了。
我們改寫一下 CSS 部分哦~
<style>
@media (min-width: 768px){
#box {
width: 600px;
height: 300px;
margin: 50px auto;
background: blue;
}
}
@media (max-width: 768px){
#box {
width: 90%;
height: 300px;
margin: 50px auto;
background: red;
}
}
</style>看看什么變化？我們來仔細(xì)的講解一下這個代碼，其實(shí)很好理解的
`@media(條件){當(dāng)滿足條件時(shí)，要使用的 CSS }`這叫做媒體查詢，就是查詢一下瀏覽器窗口的寬度，當(dāng)然你換成 height，查詢高度也沒問題。那么我們來說一下上述代碼表達(dá)的意思：
先做媒體查詢，看看當(dāng)前瀏覽器的窗口尺寸，如果滿足條件 min-width: 768px ，就是窗口的最小寬度是 768px ，那么就使用大括號里 CSS ，600px 的寬度，然后藍(lán)色背景。
第二段跟上面類似，就是當(dāng)窗口的最大寬度是 768px ，那么就執(zhí)行這段里的 CSS，90% 的寬度，紅色背景。
這個效果你要驗(yàn)證的話，要手動拖動窗口的大小去看，別打開看一眼就跑來問我為什么不起作用，那樣我不理你哦~
這個其實(shí)很簡單，只是給某一部分 CSS 加一個條件判斷而已，當(dāng)然了條件可以再復(fù)雜一些的，比如加上 and 或者 or 這類的條件。就像下面這樣。
@media (min-width: 768px) and (max-width: 1024px){
#box {
width: 80%;
height: 300px;
margin: 50px auto;
background: green;
}
}就是表示同時(shí)要滿足兩個條件，大括號里的 CSS 才起作用。如果把 and 換成 or 就是說滿足兩個條件其中之一就可以了。
這個問題不難，大家試試看就明白了，學(xué)代碼這東西就是要多嘗試，你努力玩他，他就玩不過你了，于是你就贏了，否則……你就被他玩了。
事實(shí)上這個媒體查詢可以做很多復(fù)雜的玩法，有興趣可以查詢一下，祝你看的頭暈，怕頭暈的先把我說的這些看懂就好，對了 width 也可以換成 height ，什么意思呢？你猜！
然后那個什么 IE6——8，咳咳，算了，不提了，升級 Win10 吧，會更幸福的~
本章代碼下載：本章代碼
本書是收費(fèi)的，不過交費(fèi)憑自覺。價(jià)格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號：
alay9999@163.com （劉源）
為了讓大家閱讀方便，本書將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：
未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系： dms@zji.me
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多