media query和media type總結

media type -- 媒體類型

media type是css2中的一個很是有用的屬性，經過media type咱們能夠對不一樣的設備指定特定的樣式，從而實現更豐富的界面。下面要說到css3中的media query是對media type的一種加強。

media type的種類：

• all -- 適用於全部設備

• print -- 用於打印機

• screen -- 適用於彩色電腦顯示器（也包括手機、iPad等手持設備）

• speech -- 用於語音類型

注意：CSS2.1和CSS3 media query定義了tty, tv, projection, handheld, braille, embossed, aural這些media type，可是它們在media query 4 中都廢棄了，因此不推薦使用了

media type的使用方法：

第一種：<link> 標籤的media屬性

<link href="style.css" media="screen print" ...

第二種：<style> 標籤的 media 屬性

<style media="all" type="text/css">
    p{
        color: #ff0000
    }
</style>

第三種：@import方式

<style>
    @import url("xxx.css") "screen,print";
</style>

第四種：在style裏爲某些樣式指定 media

@media speech {
    p{
        color: #ff0000
    }
}

注：若沒有指定media，默認爲all

media query -- 媒體查詢

媒體查詢是經過不一樣的媒體類型和條件定義不一樣的樣式表，媒體查詢讓CSS能夠更精確做用於不一樣的媒體類型和同一媒體的不一樣條件。也是media type的加強。

語法

媒體查詢包含一個媒體類型(media type) 以及一個到多個測試媒體特性(media feature)的表達式，表達式和媒體類型將根據實際狀況計算獲得true或者false。若是指定的媒體類型符合當前設備而且媒體特性表達式都爲真，那當前媒體查詢爲。

@media screen and (min-width: 700px) and (orientation: landscape) {}
/*其中screen就是媒體類型，min-width: 700px是媒體特性表達式*/

邏輯運算符

• and運算符 -- 用於結合多個媒體特性(media feature)到一個media query

  @media screen and (min-width: 700px) and (orientation: landscape) {
      .name {
          color:red;
      }
  }

  當設備類型爲screen，且viewport的寬度大於700px，而且設備可見區域寬度大於高度（橫屏），三個條件都知足時，大括號內的樣式纔會生效。

• 逗號（,）運算符 -- 用於結合多個media query

  @media (min-width: 700px), screen and (orientation: landscape) {
      .name {
          color:red;
      }
  }

  上面表明兩種不一樣設備，一種all，一種screen，用逗號分隔。

• not運算符 -- 用於對整個media query 取反，必須位於一個media query的開頭

  @media not all and (monochrome) {}

  等價於：

  @media not (all and (monochrome)) {}

  注意：not 是對整個media query進行否認，不能對單個media feature否認

• only運算符 --用來定某種特別的媒體類型

  對於支持Media Query的設備來講，若是存在only關鍵字，Web瀏覽器會忽略only關鍵字，並直接根據後面的表達式應用樣式文件。對於不支持Media Query的設備，但可以讀取Media Type類型的Web瀏覽器，遇到only關鍵字時會忽略這個樣式文件。

  @media only screen and (min-width: 400px) and (max-width: 600px) {}

  不支持media query可是支持media type的web瀏覽器，會省略後面的樣式文件，上面的實例解釋爲：

  @media only {}

  支持media query 的web瀏覽器會省略only關鍵字，上面實例解釋爲：

  @media screen and (min-width: 400px) and (max-width: 600px) {}

media feature -- 媒體特性

下面是一些媒體特性，不是所有

• width -- 定義輸出設備中的頁面可見區域寬度

• height -- 定義輸出設備中的頁面可見區域高度

• device-width -- 定義輸出設備的屏幕可見寬度

• device-height -- 定義輸出設備的屏幕可見高度

• orientation -- 定義'height'是否大於或等於'width'。portrait表明是（豎屏），landscape表明否（橫屏）

• aspect-ratio -- 定義width與height的比率，能夠設置min/max

• device-aspect-ratio -- 定義device-width與device-height的比率。能夠設置min/max。如常見的顯示器比率：4/3, 16/9, 16/10

• resolution -- 定義設備的分辨率。能夠設置min/max。如：96dpi, 300dpi, 118dpcm

• color -- 定義每一組輸出設備的彩色原件個數。若是不是彩色設備，則值等於0。能夠設置min/max

media query 經常使用方法

• 排他 （exclusive） 爲確保在某一個條件下只有一個樣式表生效，將查詢條件嚴格劃分，以下面：

  @media (max-width: 400px) {
      html {
          background: red;
      }
  }
  
  @media (min-width: 401px) and (max-width: 800px) {
      html {
          background: green;
      }
  }
  
  @media (min-width: 801px) {
      html {
          background: blue;
      }
  }

• 覆蓋（overriding） 能夠對元素設置相同優先級，使用樣式順序，經過覆蓋，避免排他

  @media (min-width: 400px) {
      html {
          background: red;
      }
  }
  
  @media (min-width: 600px) {
      html {
          background: green;
      }
  }
  
  @media (min-width: 800px) {
      html {
          background: blue;
      }
  }

• 無線端優先（Mobile first） 默認樣式假設爲移動設備寬度，而後經過min-width控制擴展樣式

  html {
      background: red;
  }
  
  @media (min-width: 600px) {
      html {
          background: green;
      }
  }

• PC優先（desktop first） 默認以寬屏進行樣式設置，經過max-width控制樣式覆蓋

  html {
      background: red;
  }
  
  @media (max-width: 600px) {
      html {
          background: green;
      }
  }

參考資料：

• http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html

• http://www.javashuo.com/article/p-muqtocgv-he.html

• http://blog.csdn.net/ruoyiqing/article/details/39208707