首先看看官方釋義：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype 指的是媒體類型，也就是說獲取到的設備類型帚称。
以下是css3支持的設備
all 用于所有設備
aural 已廢棄咧纠。用于語音和聲音合成器
braille 已廢棄蓬痒。 應用于盲文觸摸式反饋設備
embossed 已廢棄。 用于打印的盲人印刷設備
handheld 已廢棄漆羔。 用于掌上設備或更小的裝置乳幸，如PDA和小型電話
print 用于打印機和打印預覽
projection 已廢棄。 用于投影設備
screen 用于電腦屏幕钧椰，平板電腦粹断，智能手機等。
speech 應用于屏幕閱讀器等發(fā)聲設備
tty 已廢棄嫡霞。 用于固定的字符網(wǎng)格瓶埋，如電報、終端設備和對字符有限制的便攜設備
tv 已廢棄。 用于電視和網(wǎng)絡電視
也就是說我們可以通過使用 screen 來獲取手機設備及電腦屏幕养筒，平板電腦的屏幕信息
and|not|only 相當于條件約束曾撤，例如：
@media screen and (內(nèi)容) 表示獲取手機設備及電腦屏幕，平板電腦的屏幕信息晕粪，并且該屏幕滿足于（）中的條件
@media screen not (內(nèi)容) 表示獲取手機設備及電腦屏幕挤悉，平板電腦的屏幕信息，除了該屏幕滿足于（）中的條件
only用來定某種特定的媒體類型 巫湘，這個約束主要是針對不支持css3 的瀏覽器装悲。在實際開發(fā)中很少用到，我們就不多介紹尚氛。
此時诀诊，我們就需要填寫 @media mediatype and|not|only (media feature) 中的 media feature部分， media feature官方釋義為 媒體功能阅嘶，通俗的說 就是 我們通過獲取到設備了属瓣。那么具體是能夠獲取到哪些信息呢？
由于屬性過多讯柔，這里就不一個個解釋每個屬性的用法抡蛙。 如果讀者真想死磕，建議跳轉(zhuǎn)到https://cloud.tencent.com/developer/section/1072197
查看每個屬性的用法魂迄。本文重點介紹 min-width ,max-width 兩個屬性粗截，這兩個屬性在我們開發(fā)移動端WEB頁面時是最常用的。
min-width ： 表示最小寬度(在實際代碼中极祸，我們要理解為：當設備屏幕大于min-width的值時，則滿足條件)
max-width : 表示最大寬度(在實際代碼中怠晴，我們要理解為：當設備屏幕小于max-width的值時遥金，則滿足條件)
例如：
@media screen and (min-width: 640px) {
div {
background: yellow;
}
}
div{
width: 100px;
height: 100px;
}
意思就是當設備寬度要大于640px 的時候 則設置div 的背景顏色為黃色
需要注意的是 and 兩邊一定要有空格
@media screen and (min-width: 640px) and (max-width:960px) {
div {
background: yellow;
}
}
div{
width: 100px;
height: 100px;
}
意思就是設備寬度既要大于640px 同時也要小于 960px，使用這種方式需要注意條件要明確蒜田，例如：
@media screen and (min-width: 640px) and (max-width:640px) {
div {
background: yellow;
}
}
這段代碼將不起任何作用稿械，也是無意義代碼
針對多種設備需要設置多個判斷。 可以寫多個媒體判斷冲粤。例如：
//當屏幕寬度大于640px 且 小于960px 則div背景色為黃色
@media screen and (min-width: 640px) and (max-width: 960px) {
div {
background: yellow;
}
}
//當屏幕寬度大于960px則div背景色為紅色
@media screen and (min-width: 960px) {
div {
background: red;
}
}
div{
width: 100px;
height: 100px;
}
運行效果：
那么此時美莫，讀者可能已經(jīng)發(fā)現(xiàn)一個疑惑，假設我們設置了很多個條件梯捕。其中存在不少沖突的那么瀏覽器會做什么樣的選擇呢厢呵。 例如：
@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í)行效果：
我們發(fā)現(xiàn)，此時div 是不會變?yōu)辄S色的赐劣。很明顯漠嵌，如果出現(xiàn)沖突碉考，那么最后一個會覆蓋前面的。
但是實際開發(fā)中章钾，可能會存在非常多判斷條件。稍微不注意就很容易讓我們看暈。這里我向大家推薦使用坐標圖的方式理清思路。
就拿上一個案例，我們做一個坐標圖。
根據(jù)順序一一羅列出每個條件的條件覆蓋區(qū)域蛾派，左邊表示min 右邊表示max 如果存在沖突區(qū)域稍算，則以最靠近底線的顏色區(qū)域為準河闰。
就此本文已經(jīng)介紹了什么是rem 以及如何判斷當前設備寬度。聰明的讀者即可通過這兩點針對不同的設備設置不同的字體弃酌，寬度，高度等數(shù)據(jù)儡炼。
下文我將繼續(xù)介紹如何通過@media 來實現(xiàn) 根據(jù)不同的屏幕讓瀏覽器選擇不同的css樣式表妓湘。同時，也會向各位介紹如果在css 的各個屬性中 去做條件判斷乌询。
