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

賈順名發表於2015-07-16
CSSS3

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

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

 


相關文章