@media的作用：媒體查詢可以在指定的設(shè)備上使用對(duì)應(yīng)的樣式替代原有的樣式。
可以簡(jiǎn)單理解為告訴瀏覽器：當(dāng)滿足某條件時(shí)，調(diào)用某樣式。當(dāng)滿足條件A時(shí)，調(diào)用A樣式； 當(dāng)滿足條件B時(shí)，調(diào)用B樣式

1. 媒體查詢可用于檢測(cè)：
   ★viewport(視窗) 的寬度與高度
   ★設(shè)備的寬度與高度
   ★朝向 (智能手機(jī)橫屏，豎屏) 。
   ★分辨率
2. 語法和操作符
   語法一：內(nèi)聯(lián)@media
@media 查詢條件表達(dá)式｛ CSS樣式 ｝

@media not|only mediatype and (expressions) {...}

媒體查詢由多媒體組成，可以包含一個(gè)或多個(gè)表達(dá)式，根據(jù)表達(dá)式條件判斷是否成立，返回 true 或 false。
如果指定的多媒體類型匹配設(shè)備類型則返回查詢結(jié)果為true，文檔會(huì)在匹配的設(shè)備上顯示指定樣式效果。

可以使用操作符 not或 only 或and或，限定。
and:表示并且，要求必須滿足所有的表達(dá)式要求時(shí)，才能使用media定義樣式
not: 不，表示除…外，即排除掉某些特定的設(shè)備的，如 @media not print（非打印設(shè)備）
not 針對(duì)的是一整條媒體查詢語句，而非其中的某一個(gè)條件

@media not print and(max-width:1024px){...}
或者
@media not(print and (max-width:1024px)){..}

only: 表示只有 僅僅，表示某一種的媒體類型設(shè)備。
對(duì)于支持Media Queries的移動(dòng)設(shè)備來說，如果存在only關(guān)鍵字，移動(dòng)設(shè)備的Web瀏覽器會(huì)忽略only關(guān)鍵字并直接根據(jù)后面的表達(dá)式應(yīng)用樣式文件。對(duì)于不支持Media Queries的設(shè)備但能夠讀取Media Type類型的Web瀏覽器，遇到only關(guān)鍵字時(shí)會(huì)忽略這個(gè)樣式文件。
,多個(gè)條件設(shè)定使用逗號(hào)分隔，表手或者or，滿足其中之一。

方法二：外鏈 media屬性
<link media=“查詢條件表達(dá)式” />
除了上述格式，也可以在不同的媒體上使用不同的樣式文件，使用link外聯(lián)引入：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

3. CSS3 媒體類型(mediatype)
   print 打印機(jī)
   screen 電腦屏幕，平板，智能手機(jī)等。
   speech語音合成器等發(fā)聲設(shè)備
   all 用于所有多媒體類型設(shè)備（默認(rèn)）

4.常見媒體特性（屬性）
color顏色
color-index 顏色索引
aspect-ratio指定設(shè)備視口區(qū)域的寬高比

@media only screen and (min-aspect-ratio:16/9){...}

device-aspect-ratio設(shè)備屏幕寬高比
device-height設(shè)備屏幕高度
device-width設(shè)備屏幕寬度
grid網(wǎng)格柵格
scan掃描
height高度
monochrome黑白
★orientation方向，橫屏landscape還是豎屏portrait

@media (orientation:landscape){
    h1:before{
        content: '現(xiàn)在是橫屏效果';
        color:green;
    }
}
@media (orientation:portrait){
    h1:before{
        content: '現(xiàn)在是豎屏效果';
        color:gold;
    }
}

★resolution設(shè)備的分辨率范圍 分辨率(dpi),分辨率倍數(shù)(dppx),

@media screen and (resolution:2dppx){...}
@media screen and (resolution:3dppx){...}
@media screen and (min-resolution:2dppx){...}

★★width視口寬度 終端設(shè)備對(duì)頁面的渲染區(qū)域
視口就是通常我們定義移動(dòng)端頭部meta的viewport
在瀏覽器窗口中，視口不包括滾動(dòng)條、頂部或底部工具欄、菜單的部分

//在屏幕可視窗口尺寸大于 480 像素的設(shè)備上修改背景顏色:
@media screen and (min-width:480px){
  body{
    background-color:lightgreen;
  }
}

//在屏幕可視窗口尺寸大于 500 像素時(shí)將菜單浮動(dòng)到頁面左側(cè)：
 @media screen and (min-width:500px){
  #leftsidebar{
    width:200px;
    float:left;
  }  
  #main{
    margin-left:200px;
  }
}

以上幾乎所有的屬性都可以使用【min-】和【max-】前綴做限定 （grid、scan和orientation除外）
max-color：最大顏色
max-color-index：最大顏色索引
max-aspect-ratio：最大寬高比
max-device-aspect-ratio：最大設(shè)備屏幕寬高比
max-device-height：設(shè)備屏幕的最大高度
max-device-width： 設(shè)備屏幕的最大寬度
max-height： 最大高度
max-monochrome：每個(gè)像素的最大單色原件個(gè)數(shù)
max-resolution：最大分辨率
max-width：最大寬度

min-color：最小顏色
min-color-index：最小顏色索引
min-aspect-ratio：最小寬高比
min-device-aspect-ratio：最小設(shè)備屏幕寬高比
min-device-height：設(shè)備屏幕的最小高度
min-device-width： 設(shè)備屏幕的最小寬度
min-height： 最小高度
min-monochrome：每個(gè)像素的最小單色原件個(gè)數(shù)
min-resolution：最小分辨率
min-width：最小寬度

5. 移動(dòng)端配置媒體查詢步驟：

（1）定義移動(dòng)端視口，即設(shè)置好meta標(biāo)簽

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

width=device-width寬度等于當(dāng)前設(shè)備的寬度
initial-scale=1.0 初始縮放比例
minimum-scale允許用戶縮放到的最小比例
maximum-scale允許用戶縮放到的最大比例
user-scalable用戶是否可手動(dòng)縮放
提示：手機(jī)系統(tǒng)默認(rèn)會(huì)給予一定的視口寬度設(shè)置，并且允許用戶進(jìn)行頁面縮放，這樣一些未做移動(dòng)端處理的PC網(wǎng)站也可以在手機(jī)上呈現(xiàn)（只不過是頁面的內(nèi)容會(huì)看上去很?。Ｒ虼宋覀?cè)O(shè)置meta的目的就是要修改默認(rèn)設(shè)置，達(dá)到頁面尺寸和移動(dòng)端設(shè)備能匹配
（2）針對(duì)IE兼容處理
a. 為防止IE的實(shí)際瀏覽器模式默認(rèn)較低，需要設(shè)置IE渲染方式為最新（ edge ）

<meta http-equiv="X-UA-Compatible" content="IE=edge">

b. IE9以下不支持HTML5、不支持CSS3 @Media，所以需要加載兩個(gè)JS文件，來保證代碼實(shí)現(xiàn)兼容

<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

（3）規(guī)劃移動(dòng)端適配需求

image.png