總結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屬性值的連結

 也可以看看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-系列,大尺寸的反之;

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