移動設備的屏幕分辨率千差萬別，為了獲得更好的用戶體驗，需要根據不同的分辨率去呈現不同的界面。媒體查詢就是目前的解決方案。
- 在CSS文件中定義媒體查詢
@media screen and (min-width: 640px) {
.container{
padding:10px;
}
}
- 在
link標簽中定義媒體查詢
<link rel="stylesheet" href="test.css" media="min-width:640px" />
在這種情況下，test.css始終都會被引入，但是其中的規則是否生效，則取決于媒體查詢條件。
- 媒體查詢中的媒體類型
| 值 | 描述 |
|---|---|
| all | 所有設備 |
| 打印機或者打印預覽 | |
| screen | 電腦，平板，手機等屏幕 |
| speech | 屏幕閱讀器等發聲設備 |
