根据不同屏幕的宽度改变样式.
语法
@media screen and (条件) { } /* 满足条件则生效 */
条件
| 条件 | 含义 | 解释 |
|---|---|---|
| min-width | 样式生效的最小宽 | 当屏幕宽度大于>=该宽度时，选择器样式才生效 |
| max-width | 样式生效的最大宽 | 当屏幕宽度<=该宽度时，选择器样式才生效 |
| width | 样式生效的宽度 | 当屏幕宽度正好=该宽度时，选择器样式才生效 |
注意点：
- 媒体查询只能控制选择器是否生效，不能提升选择器优先级！
- 媒体查询中可以同时设置多个条件，条件之间以and连接
- 媒体查询语法格式中空格不要省略
为了保证大屏的媒体查询不被覆盖，媒体查询一般从小屏往大了写。