CSS 教程
媒體查詢
媒體(media)查詢?cè)?CSS3 上有介紹：CSS3 @media 查詢。
使用 @media 查詢，你可以針對(duì)不同的媒體類型定義不同的樣式。
實(shí)例
如果瀏覽器窗口小于 500px, 背景將變?yōu)闇\藍(lán)色：
??? body {
??????? background-color: lightblue;
??? }
}
運(yùn)行代碼 ?
添加斷點(diǎn)
在先前的教程中我們使用行和列來(lái)制作網(wǎng)頁(yè)，它是響應(yīng)式的，但在小屏幕上并不能友好的展示。
媒體查詢可以幫我們解決這個(gè)問題。我們可以在設(shè)計(jì)稿的中間添加斷點(diǎn)，不同的斷點(diǎn)有不同的效果。
桌面設(shè)備
手機(jī)設(shè)備
使用媒體查詢?cè)?768px 添加斷點(diǎn)：
實(shí)例
當(dāng)屏幕 (瀏覽器窗口) 小于 768px, 每一列的寬度是 100%:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
??? /* For mobile phones: */
??? [class*="col-"] {
??????? width: 100%;
??? }
}
運(yùn)行代碼 ?
為移動(dòng)端優(yōu)先設(shè)計(jì)
移動(dòng)端優(yōu)先意味著在設(shè)計(jì)桌面和其他設(shè)備時(shí)優(yōu)先考慮移動(dòng)端的設(shè)計(jì)。
這就意味著我們必須對(duì) CSS 做一些改變。
我們?cè)谄聊恍∮?768px 進(jìn)行樣式修改，同樣在屏幕寬度大于 768px 時(shí)也需要修改樣式。以下是移動(dòng)端優(yōu)先實(shí)例：
[class*="col-"] {
??? width: 100%;
}
@media only screen and (min-width: 768px) {
??? /* For desktop: */
??? .col-1 {width: 8.33%;}
??? .col-2 {width: 16.66%;}
??? .col-3 {width: 25%;}
??? .col-4 {width: 33.33%;}
??? .col-5 {width: 41.66%;}
??? .col-6 {width: 50%;}
??? .col-7 {width: 58.33%;}
??? .col-8 {width: 66.66%;}
??? .col-9 {width: 75%;}
??? .col-10 {width: 83.33%;}
??? .col-11 {width: 91.66%;}
??? .col-12 {width: 100%;}
}
其他斷點(diǎn)
你可以根據(jù)自己的需要添加斷點(diǎn)。
我們同樣可以為平板設(shè)備和移動(dòng)手機(jī)設(shè)備設(shè)置斷點(diǎn)。
桌面設(shè)備
平板設(shè)備
手機(jī)設(shè)備
在屏幕為 600px 時(shí)添加媒體查詢，并設(shè)置新的樣式（屏幕大于600px但小于768px）：
實(shí)例
注意兩組類樣式是相同的，但名稱不同 (col- 和 col-m-):
[class*="col-"] {
??? width: 100%;
}
@media only screen and (min-width: 600px) {
??? /* For tablets: */
??? .col-m-1 {width: 8.33%;}
??? .col-m-2 {width: 16.66%;}
??? .col-m-3 {width: 25%;}
??? .col-m-4 {width: 33.33%;}
??? .col-m-5 {width: 41.66%;}
??? .col-m-6 {width: 50%;}
??? .col-m-7 {width: 58.33%;}
??? .col-m-8 {width: 66.66%;}
??? .col-m-9 {width: 75%;}
??? .col-m-10 {width: 83.33%;}
??? .col-m-11 {width: 91.66%;}
??? .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
??? /* For desktop: */
??? .col-1 {width: 8.33%;}
??? .col-2 {width: 16.66%;}
??? .col-3 {width: 25%;}
??? .col-4 {width: 33.33%;}
??? .col-5 {width: 41.66%;}
??? .col-6 {width: 50%;}
??? .col-7 {width: 58.33%;}
??? .col-8 {width: 66.66%;}
??? .col-9 {width: 75%;}
??? .col-10 {width: 83.33%;}
??? .col-11 {width: 91.66%;}
??? .col-12 {width: 100%;}
}
運(yùn)行代碼 ?
以上代碼看起來(lái)很多余，但是他可以根據(jù)屏幕大小自動(dòng)設(shè)置不同的樣式，所以還是非常必要的。
HTML 實(shí)例
針對(duì)桌面設(shè)備:
第一和第三部分跨越 3 列。中間部分跨域 6 列。
針對(duì)平板設(shè)備:
第一跨域 3列，第二部分跨越 9 列，第三部分跨域 12 列：
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>
方向：橫屏/豎屏
結(jié)合CSS媒體查詢,可以創(chuàng)建適應(yīng)不同設(shè)備的方向(橫屏landscape、豎屏portrait等)的布局。
語(yǔ)法：
orientation：portrait | landscape
- portrait：指定輸出設(shè)備中的頁(yè)面可見區(qū)域高度大于或等于寬度
- landscape： 除portrait值情況外，都是landscape
實(shí)例
如果是橫屏背景將是淺藍(lán)色：
??? body {
??????? background-color: lightblue;
??? }
}
運(yùn)行代碼 ?