介紹：
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
語法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
你也可以針對不同的媒體使用不同 stylesheets :
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
mediatype：媒體類型
- all 所有設備
- print 打印機
- screen 電腦屏幕、平板、手機
- speech 發聲器
關鍵字
- and：可以將多個媒體特性連接到一起，且
- not：排除某個媒體類型，非
- only：指定某個特定的媒體類型
media feature：媒體特性
| 值 | 描述 |
|---|---|
| aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的比率 |
| color | 定義輸出設備每一組彩色原件的個數。如果不是彩色設備，則值等於0 |
| color-index | 定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0 |
| device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的比率。 |
| device-height | 定義輸出設備的屏幕可見高度。 |
| device-width | 定義輸出設備的屏幕可見寬度。 |
| grid | 用來查詢輸出設備是否使用柵格或點陣。 |
| height | 定義輸出設備中的頁面可見區域高度。 |
| max-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-color | 定義輸出設備每一組彩色原件的最大個數。 |
| max-color-index | 定義在輸出設備的彩色查詢表中的最大條目數。 |
| max-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-device-height | 定義輸出設備的屏幕可見的最大高度。 |
| max-device-width | 定義輸出設備的屏幕最大可見寬度。 |
| max-height | 定義輸出設備中的頁面最大可見區域高度。 |
| max-monochrome | 定義在一個單色框架緩衝區中每像素包含的最大單色原件個數。 |
| max-resolution | 定義設備的最大分辨率。 |
| max-width | 定義輸出設備中的頁面最大可見區域寬度。 |
| min-aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的最小比率。 |
| min-color | 定義輸出設備每一組彩色原件的最小個數。 |
| min-color-index | 定義在輸出設備的彩色查詢表中的最小條目數。 |
| min-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最小比率。 |
| min-device-width | 定義輸出設備的屏幕最小可見寬度。 |
| min-device-height | 定義輸出設備的屏幕的最小可見高度。 |
| min-height | 定義輸出設備中的頁面最小可見區域高度。 |
| min-monochrome | 定義在一個單色框架緩衝區中每像素包含的最小單色原件個數 |
| min-resolution | 定義設備的最小分辨率。 |
| min-width | 定義輸出設備中的頁面最小可見區域寬度。 |
| monochrome | 定義在一個單色框架緩衝區中每像素包含的單色原件個數。如果不是單色設備，則值等於0 |
| orientation | 定義輸出設備中的頁面可見區域高度是否大於或等於寬度。 |
| resolution | 定義設備的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 定義電視類設備的掃描工序。 |
| width | 定義輸出設備中的頁面可見區域寬度。 |
實踐1：
注意：爲了防止混亂，媒體查詢按照從小到大或者從大到小的順序來寫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
<style>
div{
height: 100px;
}
/* 屏幕小於540px 背景紅色 */
@media screen and (max-width: 539px){
div{
background-color:red;
}
}
/* 屏幕大於於540px 小於 800px 背景藍色 */
@media screen and (min-width: 540px){
div{
background-color:blue;
}
}
/* 屏幕大於800px 背景粉色 */
@media screen and (min-width: 800px){
div{
background-color:pink;
}
}
</style>
</body>
</html>
元素動態變化：
媒體查詢配合rem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<div>測試</div>
<style>
div{
height: 1rem;
font-size: 0.5rem;
background-color: green;
color: #fff;
}
@media screen and (max-width: 539px){
html{
font-size: 50px;
}
}
@media screen and (min-width: 540px){
html{
font-size: 80px;
}
}
@media screen and (min-width: 800px){
html{
font-size: 100px;
}
}
</style>
</body>
</html>