移动设备的屏幕分辨率千差万别，为了获得更好的用户体验，需要根据不同的分辨率去呈现不同的界面。媒体查询就是目前的解决方案。
- 在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 | 屏幕阅读器等发声设备 |
