1.用途
- 使用 @media 查詢，可以針對不同的媒體類型定義不同的樣式
- @media 可以針對不同的屏幕尺寸設(shè)置不同的樣式城舞，特別是如果你需要設(shè)置設(shè)計響應(yīng)式的頁面弟胀，@media 是非常有用的
- 注意：重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面
2.用法
@media screen and (min-width: 480px) {
body {
background-color: yellow;
}
}
/*屏幕寬度為480px以上時body的背景色為黃色*/
（1）寫在style標(biāo)簽或CSS文件中
（2）直接在link中判斷設(shè)備的尺寸责语，然后引用不同的CSS文件
/* 當(dāng)屏幕的寬度大于等于400px的時候贴硫，應(yīng)用 A.css */
<link rel="stylesheet" type="text/css"
href="A.css" media="screen and (min-width: 400px)">
3.常用媒體類型
- all：用于所有多媒體類型設(shè)備
- print：用于打印機(jī)
- screen：用于電腦屏幕椿每，平板，智能手機(jī)等
- speech：用于屏幕閱讀器
3.常用特性
- width：定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾?/li>
- height：定義輸出設(shè)備中的頁面可見區(qū)域高度
- max-width：定義輸出設(shè)備中的頁面最大可見區(qū)域?qū)挾?/li>
- max-height：定義輸出設(shè)備中的頁面最大可見區(qū)域高度
- max-device-width：定義輸出設(shè)備的屏幕最大可見寬度
- max-device-height：定義輸出設(shè)備的屏幕可見的最大高度
- orientation：檢測設(shè)備目前處于橫向（值為landscape）還是縱向（值為portrait）狀態(tài)
- aspect-ratio：檢測瀏覽器可視寬度和高度的比例英遭。(例如：aspect-ratio:16/9)
- device-aspect-ratio：檢測設(shè)備的寬度和高度的比例
- color：檢測顏色的位數(shù)（例如：min-color: 32就會檢測設(shè)備是否擁有32位顏色）
