第三種：@import方式

第四種：在style里為某些樣式指定 media

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

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

媒體查詢是通過不同的媒體類型和條件定義不同的樣式表，媒體查詢讓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) {}

下面是一些媒體特性，不是全部

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

排他 （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

https://segmentfault.com/a/1190000002812335

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