首先看看官方釋義：

image.png

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype 指的是媒體類型，也就是說獲取到的設(shè)備類型。
以下是css3支持的設(shè)備
all 用于所有設(shè)備
aural 已廢棄。用于語音和聲音合成器
braille 已廢棄。 應(yīng)用于盲文觸摸式反饋設(shè)備
embossed 已廢棄。 用于打印的盲人印刷設(shè)備
handheld 已廢棄。 用于掌上設(shè)備或更小的裝置，如PDA和小型電話
print 用于打印機(jī)和打印預(yù)覽
projection 已廢棄。 用于投影設(shè)備
screen 用于電腦屏幕，平板電腦，智能手機(jī)等。
speech 應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備
tty 已廢棄。 用于固定的字符網(wǎng)格，如電報(bào)、終端設(shè)備和對(duì)字符有限制的便攜設(shè)備
tv 已廢棄。 用于電視和網(wǎng)絡(luò)電視

也就是說我們可以通過使用 screen 來獲取手機(jī)設(shè)備及電腦屏幕，平板電腦的屏幕信息

and|not|only 相當(dāng)于條件約束，例如：
@media screen and (內(nèi)容) 表示獲取手機(jī)設(shè)備及電腦屏幕，平板電腦的屏幕信息，并且該屏幕滿足于（）中的條件

@media screen not (內(nèi)容) 表示獲取手機(jī)設(shè)備及電腦屏幕，平板電腦的屏幕信息，除了該屏幕滿足于（）中的條件

only用來定某種特定的媒體類型 ，這個(gè)約束主要是針對(duì)不支持css3 的瀏覽器。在實(shí)際開發(fā)中很少用到，我們就不多介紹。

此時(shí)，我們就需要填寫 @media mediatype and|not|only (media feature) 中的 media feature部分， media feature官方釋義為 媒體功能，通俗的說 就是 我們通過獲取到設(shè)備了。那么具體是能夠獲取到哪些信息呢？

image.png

image.png

由于屬性過多，這里就不一個(gè)個(gè)解釋每個(gè)屬性的用法。 如果讀者真想死磕，建議跳轉(zhuǎn)到https://cloud.tencent.com/developer/section/1072197
查看每個(gè)屬性的用法。本文重點(diǎn)介紹 min-width ,max-width 兩個(gè)屬性，這兩個(gè)屬性在我們開發(fā)移動(dòng)端WEB頁面時(shí)是最常用的。
min-width ： 表示最小寬度(在實(shí)際代碼中，我們要理解為：當(dāng)設(shè)備屏幕大于min-width的值時(shí)，則滿足條件)
max-width : 表示最大寬度(在實(shí)際代碼中，我們要理解為：當(dāng)設(shè)備屏幕小于max-width的值時(shí)，則滿足條件)
例如：

        @media screen and (min-width: 640px) {
            div {
                background: yellow;
            }
        }

        div{
            width: 100px;
            height: 100px;
        }

屏幕錄制 2019-12-16 時(shí)間 下午2.50.01 2.gif

意思就是當(dāng)設(shè)備寬度要大于640px 的時(shí)候 則設(shè)置div 的背景顏色為黃色
需要注意的是 and 兩邊一定要有空格

        @media screen and (min-width: 640px) and (max-width:960px) {
            div {
                background: yellow;
            }
        }

        div{
            width: 100px;
            height: 100px;
        }

意思就是設(shè)備寬度既要大于640px 同時(shí)也要小于 960px，使用這種方式需要注意條件要明確，例如：

        @media screen and (min-width: 640px) and (max-width:640px) {
            div {
                background: yellow;
            }
        }

這段代碼將不起任何作用，也是無意義代碼

針對(duì)多種設(shè)備需要設(shè)置多個(gè)判斷。 可以寫多個(gè)媒體判斷。例如：

//當(dāng)屏幕寬度大于640px 且 小于960px 則div背景色為黃色
        @media screen and (min-width: 640px) and (max-width: 960px) {
            div {
                background: yellow;
            }
        }
//當(dāng)屏幕寬度大于960px則div背景色為紅色
        @media screen and (min-width: 960px) {
            div {
                background: red;
            }
        }

        div{
            width: 100px;
            height: 100px;
        }

運(yùn)行效果：

2.gif

那么此時(shí)，讀者可能已經(jīng)發(fā)現(xiàn)一個(gè)疑惑，假設(shè)我們?cè)O(shè)置了很多個(gè)條件。其中存在不少?zèng)_突的那么瀏覽器會(huì)做什么樣的選擇呢。 例如：

        @media screen and (min-width: 640px) and (max-width: 960px) {
            div {
                background: yellow;
            }
        }

        @media screen and (min-width: 960px) {
            div {
                background: red;
            }
        }

        @media screen and (max-width: 960px) {
            div {
                background: blue;
            }
        }

執(zhí)行效果：

3.gif

我們發(fā)現(xiàn)，此時(shí)div 是不會(huì)變?yōu)辄S色的。很明顯，如果出現(xiàn)沖突，那么最后一個(gè)會(huì)覆蓋前面的。

但是實(shí)際開發(fā)中，可能會(huì)存在非常多判斷條件。稍微不注意就很容易讓我們看暈。這里我向大家推薦使用坐標(biāo)圖的方式理清思路。
就拿上一個(gè)案例，我們做一個(gè)坐標(biāo)圖。

image.png

根據(jù)順序一一羅列出每個(gè)條件的條件覆蓋區(qū)域，左邊表示min 右邊表示max 如果存在沖突區(qū)域，則以最靠近底線的顏色區(qū)域?yàn)闇?zhǔn)。

就此本文已經(jīng)介紹了什么是rem 以及如何判斷當(dāng)前設(shè)備寬度。聰明的讀者即可通過這兩點(diǎn)針對(duì)不同的設(shè)備設(shè)置不同的字體，寬度，高度等數(shù)據(jù)。

下文我將繼續(xù)介紹如何通過@media 來實(shí)現(xiàn) 根據(jù)不同的屏幕讓瀏覽器選擇不同的css樣式表。同時(shí)，也會(huì)向各位介紹如果在css 的各個(gè)屬性中 去做條件判斷。