CSS3的媒體查詢是對(duì)CSS2媒體類型的擴(kuò)展,完善;

CSS2的媒體類型僅僅定義了一些設(shè)備的關(guān)鍵字,CSS3的媒體查詢進(jìn)一步擴(kuò)展了如width,height,color等具有取值范圍的屬性;

media query 與 media type 的區(qū)別在于: media query是一個(gè)值或一個(gè)范圍的值,而media type僅僅是設(shè)備的匹配(所以media type 是一個(gè)單詞,而media query 后邊需要跟著一個(gè)數(shù)值,兩者可以混合使用);

media可用于link標(biāo)簽屬性 [media]

  <link rel="stylesheet" type="text/css" href="../css/print.css" media="print and (max-width : 600px)" />

以及css文件內(nèi),下邊代碼均是使用css內(nèi)media;

介紹一下可用的運(yùn)算符&常用的media type以及media query:

運(yùn)算符:

and:

and運(yùn)算符用于符號(hào)兩邊規(guī)則均滿足條件則匹配

@media screen and (max-width : 600px) {
/*匹配寬度小于600px的電腦屏幕*/
}

not:

not運(yùn)算符用于取非,所有不滿足該規(guī)則的均匹配

@media not print {
/*匹配除了打印機(jī)以外的所有設(shè)備*/
}

使用not時(shí)請(qǐng)注意,如果不加括號(hào),也許會(huì)產(chǎn)生一些奇怪的現(xiàn)象,例:

@media not all and (max-width : 500px) {}
/*等價(jià)于*/
@media not (all and (max-width : 500px)) {}
/*而不是*/
@media (not all) and (max-width : 500px) {}

所以,如果要使用not,還是顯式的添加括號(hào)比較明確點(diǎn)

,(逗號(hào)):

相當(dāng)于 or 用于兩邊有一條滿足則匹配

@media screen , (min-width : 800px) {
/*匹配電腦屏幕或者寬度大于800px的設(shè)備*/
}

Media Type(只說(shuō)幾個(gè)常用的,其余會(huì)給出鏈接):

All:

all是默認(rèn)值,匹配所有設(shè)備;

@media all {
/*可以過(guò)濾不支持media的瀏覽器*/
}

Screen:

匹配電腦屏幕;

Print:

匹配打印機(jī)(打印預(yù)覽時(shí)也會(huì)匹配)[本人簡(jiǎn)歷專門為print做了一套樣式~]

常用的一般就這三個(gè)type,其余Media Type 有興趣的可以看下 W3School的說(shuō)明或W3的文檔

Media Query(也是說(shuō)一些常用的): //需要注意的是,Media Query必須要加括號(hào),一個(gè)括號(hào)是一個(gè)query

max-width(max-height):

@media (max-width : 600px) {
/*匹配界面寬度小于600px的設(shè)備*/
}

min-width(min-height):

@media (min-width : 400px) {
/*匹配界面寬度大于400px的設(shè)備*/
}

max-device-width(max-device-height):

@media (max-device-width : 800px) {
/*匹配設(shè)備(不是界面)寬度小于800px的設(shè)備*/
}

min-device-width(min-device-height):

@media (min-device-width : 600px) {
/*匹配設(shè)備(不是界面)寬度大于600px的設(shè)備*/
}

做移動(dòng)開發(fā)時(shí)用device-width/device-height,比較好一點(diǎn)吧,因?yàn)橛行┦謾C(jī)瀏覽器默認(rèn)會(huì)對(duì)頁(yè)面進(jìn)行一些縮放,所以按照設(shè)備寬高來(lái)進(jìn)行匹配會(huì)更接近開發(fā)時(shí)所期望的效果;

給出全部的Media Query屬性值的鏈接 W3的文檔也可以看看MDN的,有志愿者漢化了 MDN Media Query 文檔

media是可以嵌套的:

@media not print {
    /*通用樣式*/
    @media (max-width:600px) {
        /*此條匹配寬度小于600px的非打印機(jī)設(shè)備*/     
    }
    @media (min-600px) {
        /*此條匹配寬度大于600px的非打印機(jī)設(shè)備*/     
    }
}

這樣省去了將 not print 寫兩遍的冗余.這樣寫也是有一定好處的,因?yàn)橛行g覽器也許只支持Media Type 而不支持 Media Query- -(不要問(wèn)我為什么知道,栽過(guò)坑)

Media Query(僅指上邊那幾個(gè))的值的單位可以是 px em rem (%/vh/vw/vmin/vmax什么的沒(méi)有試...感覺(jué)應(yīng)該沒(méi)什么用吧...);

Media Query是響應(yīng)式頁(yè)面的核心,其實(shí)說(shuō)響應(yīng)式頁(yè)面就是在不同分辨率下顯示不同的效果;

編寫響應(yīng)式頁(yè)面CSS時(shí)分為從小到大和從大到小(尺寸);

本人弱弱的推薦從小尺寸開始寫的 Media Query 使用 max-系列,大尺寸的反之;

本文哪里有錯(cuò)誤及不足還請(qǐng)大家指出;

總結(jié)

以上是生活随笔為你收集整理的总结CSS3新特性(媒体查询篇)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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