第三種：@import方式

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

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

注：若沒有指定media，默認(rèn)為all

媒體查詢是通過不同的媒體類型和條件定義不同的樣式表，媒體查詢讓CSS可以更精確作用于不同的媒體類型和同一媒體的不同條件。也是media type的增強(qiáng)。

媒體查詢包含一個(gè)媒體類型(media type) 以及一個(gè)到多個(gè)測(cè)試媒體特性(media feature)的表達(dá)式，表達(dá)式和媒體類型將根據(jù)實(shí)際情況計(jì)算得到true或者false。如果指定的媒體類型符合當(dāng)前設(shè)備并且媒體特性表達(dá)式都為真，那當(dāng)前媒體查詢?yōu)椤?/p>

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

and運(yùn)算符 -- 用于結(jié)合多個(gè)媒體特性(media feature)到一個(gè)media query

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

當(dāng)設(shè)備類型為screen，且viewport的寬度大于700px，并且設(shè)備可見區(qū)域?qū)挾却笥诟叨龋M屏），三個(gè)條件都滿足時(shí)，大括號(hào)內(nèi)的樣式才會(huì)生效。

逗號(hào)（,）運(yùn)算符 -- 用于結(jié)合多個(gè)media query

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

上面代表兩種不同設(shè)備，一種all，一種screen，用逗號(hào)分隔。

not運(yùn)算符 -- 用于對(duì)整個(gè)media query 取反，必須位于一個(gè)media query的開頭

@media not all and (monochrome) {}

等價(jià)于：

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

注意：not 是對(duì)整個(gè)media query進(jìn)行否定，不能對(duì)單個(gè)media feature否定

only運(yùn)算符 --用來定某種特別的媒體類型

對(duì)于支持Media Query的設(shè)備來說，如果存在only關(guān)鍵字，Web瀏覽器會(huì)忽略only關(guān)鍵字，并直接根據(jù)后面的表達(dá)式應(yīng)用樣式文件。對(duì)于不支持Media Query的設(shè)備，但能夠讀取Media Type類型的Web瀏覽器，遇到only關(guān)鍵字時(shí)會(huì)忽略這個(gè)樣式文件。

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

不支持media query但是支持media type的web瀏覽器，會(huì)省略后面的樣式文件，上面的實(shí)例解釋為：

@media only {}

支持media query 的web瀏覽器會(huì)省略only關(guān)鍵字，上面實(shí)例解釋為：

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

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

width -- 定義輸出設(shè)備中的頁面可見區(qū)域寬度

height -- 定義輸出設(shè)備中的頁面可見區(qū)域高度

device-width -- 定義輸出設(shè)備的屏幕可見寬度

device-height -- 定義輸出設(shè)備的屏幕可見高度

orientation -- 定義"height"是否大于或等于"width"。portrait代表是（豎屏），landscape代表否（橫屏）

aspect-ratio -- 定義width與height的比率，可以設(shè)置min/max

device-aspect-ratio -- 定義device-width與device-height的比率?？梢栽O(shè)置min/max。如常見的顯示器比率：4/3, 16/9, 16/10

resolution -- 定義設(shè)備的分辨率。可以設(shè)置min/max。如：96dpi, 300dpi, 118dpcm

color -- 定義每一組輸出設(shè)備的彩色原件個(gè)數(shù)。如果不是彩色設(shè)備，則值等于0?？梢栽O(shè)置min/max

排他 （exclusive） 為確保在某一個(gè)條件下只有一個(gè)樣式表生效，將查詢條件嚴(yán)格劃分，如下面：

@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） 可以對(duì)元素設(shè)置相同優(yōu)先級(jí)，使用樣式順序，通過覆蓋，避免排他

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

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

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

無線端優(yōu)先（Mobile first） 默認(rèn)樣式假設(shè)為移動(dòng)設(shè)備寬度，然后通過min-width控制擴(kuò)展樣式

html {
    background: red;
}

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

PC優(yōu)先（desktop first） 默認(rèn)以寬屏進(jìn)行樣式設(shè)置，通過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