建議學(xué)習(xí)時長： 30分鐘
學(xué)習(xí)方式：深入
學(xué)習(xí)目標(biāo)
- 了解什么時候用媒體查詢
- 知道媒體查詢怎么寫
詳細(xì)介紹
CSS媒體查詢允許我們根據(jù)設(shè)備的特性來應(yīng)用不同的樣式申明歇父。如诈乒，我們可以讓 768px 寬度的設(shè)備(ipad) 及以上屏幕內(nèi)容顯示4列撩满，768px 以下的顯示 1列习蓬。
語法
以@media開頭來表示這是一條媒體查詢語句旺隙。@media后面的是一個或者多個表達(dá)式荣刑，如果表達(dá)式為真馅笙，則應(yīng)用樣式。如
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
上面的代碼在屏幕寬度小于 600px 的時候嘶摊，會作用大括號里的內(nèi)容延蟹。
媒體查詢可以在 link標(biāo)簽上加media屬性或css文件中使用。
<!-- link元素中的CSS媒體查詢 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 樣式表中的CSS媒體查詢 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
媒體查詢語句結(jié)構(gòu)
由媒體類型 +一到多個CSS屬性判斷組成叶堆，而多個CSS屬性判斷可以用關(guān)鍵字and連接阱飘。媒體類型是可選的，默認(rèn)是全部（all）。
@media screen and (min-width:1024px) and (max-width:1280px) and (animation){
body{font-size:medium;}
}
max與min
他們是要配合支持它們的屬性使用的,如：
@media (min-width:1000px) and (min-device-width:1500px){
body{font-size:medium;}
}
邏輯操作符
操作符 not沥匈，and 和 only 可以用來構(gòu)建復(fù)雜的媒體查詢蔗喂。
and 操作符用來把多個 媒體屬性 組合起來，合并到同一條媒體查詢中高帖。只有當(dāng)每個屬性都為
真時缰儿，這條查詢的結(jié)果才為真。
not 操作符用來對一條媒體查詢的結(jié)果進(jìn)行取反散址。
only 操作符表示僅在媒體查詢匹配成功的情況下應(yīng)用指定樣式乖阵。可以通過它讓選中的樣式在老式瀏覽器中不被應(yīng)用预麸。
注意：若使用了 not 或 only 操作符瞪浸，必須明確指定一個媒體類
型。
media query支持的屬性
| 屬性 | 值 | 是否接受 min/max 前綴 | 描述 |
|---|---|---|---|
| color | 整數(shù) | yes | 每種色彩的字節(jié)數(shù) |
| device-aspect-ratio | 整數(shù)/整數(shù) | yes | 寬高比例 |
| device-height | 整數(shù)+單位 | yes | 設(shè)備屏幕的輸出高度 |
| device-width | 整數(shù)+單位 | yes | 設(shè)備屏幕的輸出寬度 |
| grid | 整數(shù) | no | 是否是基于格柵的設(shè)備 |
| height | 整數(shù)+單位 | yes | 渲染界面的高度 |
| monochrome | 整數(shù) | yes | 單色幀緩沖器中每像素字節(jié) |
| resolution | 分辨率(“dpi/dpcm”) | yes | 分辨率 |
| scan | Progressive interlaced | no | tv媒體類型的掃描方 |
| width | 整數(shù)+單位 | yes | 渲染界面的寬度 |
| orientation | Portrait/landscape | no | 橫屏或豎屏 |
webkit瀏覽器對media query支持的屬性
常見的有
- transform-2d 只用于支持使用 -webkit-transform實現(xiàn)2D變換的瀏覽器
- transform-3d 只用于支持使用 -webkit-transform實現(xiàn)3D變換的瀏覽器
- transition 只用于支持使用-webkit-transition實現(xiàn)變換效果的瀏覽器
- animation 只用于支持使用-webkit-animation實現(xiàn)動畫的瀏覽器
媒體類型(media type)列表
- all 所有設(shè)備
- braille 盲文
- embossed 盲文打印
- handheld 手持設(shè)備
- print 文檔打印或打印預(yù)覽模式
- projection 項目演示吏祸，比如幻燈
- screen 彩色電腦屏幕
- speech 演講
- tty 固定字母間距的網(wǎng)格的媒體对蒲，比如電傳打字機
- tv 電視
實例
android手機的多分辨率問題
android系統(tǒng)的開放性導(dǎo)致其終端的多樣性，那么對于各種各樣的android手機來說贡翘，屏幕分辨率的差異導(dǎo)致針對android手機的頁面重構(gòu)復(fù)雜性增加蹈矮，那么我們可以用media query為每種分辨率提供特定樣式：
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
selector{
}
}
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
selector{
}
}
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
selector{
}
}
device-aspect-ratio
device-aspect-ratio可以用來適配特定屏幕長寬比的設(shè)備，這也是一個很有用的屬性鸣驱，比如膀跌，我們的頁面想要對長寬比為4:3的普通屏幕定義一種樣式鸦泳，然后對于16:9和16:10的寬屏送悔，定義另一種樣式靠瞎，比如自適應(yīng)寬度和固定寬度：
/* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
selector{
}
}
/* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
selector{
}
}
