總結CSS3新特性(媒體查詢篇)

CSS3的媒體查詢是對CSS2媒體類型的擴展,完善;

CSS2的媒體類型僅僅定義了一些設備的關鍵字,CSS3的媒體查詢進一步擴展了如width,height,color等具有取值范圍的屬性;

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

media可用於link標簽屬性 [media]

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

以及css文件內,下邊代碼均是使用css內media;

介紹一下可用的運算符&常用的media type以及media query:

運算符:

and:

and運算符用於符號兩邊規則均滿足條件則匹配

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

 

not:

not運算符用於取非,所有不滿足該規則的均匹配

@media not print {
/*匹配除了打印機以外的所有設備*/
}

使用not時請注意,如果不加括號,也許會產生一些奇怪的現象,例:

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

所以,如果要使用not,還是顯式的添加括號比較明確點

,(逗號):

相當於 or 用於兩邊有一條滿足則匹配

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

 

Media Type(只說幾個常用的,其余會給出鏈接):

All:

all是默認值,匹配所有設備;

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

Screen:

匹配電腦屏幕;

Print:

匹配打印機(打印預覽時也會匹配)[本人簡歷專門為print做了一套樣式~]

 

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

 

Media Query(也是說一些常用的): //需要注意的是,Media Query必須要加括號,一個括號是一個query

max-width(max-height):

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

min-width(min-height):

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

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

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

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

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

做移動開發時用device-width/device-height,比較好一點吧,因為有些手機瀏覽器默認會對頁面進行一些縮放,所以按照設備寬高來進行匹配會更接近開發時所期望的效果;

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

media是可以嵌套的:

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

這樣省去了將 not print 寫兩遍的冗余.這樣寫也是有一定好處的,因為有些瀏覽器也許只支持Media Type 而不支持 Media Query- -(不要問我為什么知道,栽過坑)

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

Media Query是響應式頁面的核心,其實說響應式頁面就是在不同分辨率下顯示不同的效果;

編寫響應式頁面CSS時分為從小到大和從大到小(尺寸);

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

本文哪里有錯誤及不足還請大家指出;