使用场景
在 CSS 中，媒体查询用于根据不同的屏幕尺寸设置不同的样式。可以使用媒体查询来设置移动端的样式，例如调整字体大小、元素的宽度和高度、图片的缩放比例等。
基本使用方式
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
其中，media-type 是指定媒体类型的关键字，例如 "screen" 表示屏幕，"print" 表示打印，"speech" 表示语音朗读等。media-feature-rule 是指定媒体特征的条件，例如 "width <= 500px" 表示屏幕宽度小于 500px。
范例
@media screen and (max-width: 500px) { ... }：表示当屏幕宽度小于 500px 时，应用 CSS 规则。
@media screen and (min-width: 500px) { ... }：表示当屏幕宽度大于或等于 500px 时，应用 CSS 规则。
@media screen and (orientation: landscape) { ... }：表示当屏幕方向为横向时，应用 CSS 规则。
@media screen and (orientation: portrait) { ... }：表示当屏幕方向为纵向时，应用 CSS 规则。
使用提升
1、朝向
一个受到良好支持的媒体特征是orientation，我们可以用它测得竖放（portrait mode）和横放（landscape mode）模式。
如：
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
// 代码指的是要在设备处于横向的时候改变 body 文本颜色
2、"与"、"或"和"非"
与 : 混合媒体特征，你可以以与在上面使用and很相同的方式，用and来混合媒体类型和特征。
@media screen and (min-width: 400px) and (orientation: landscape) {
body {
color: blue;
}
}
// 我们可能会想要测得min-width和orientation，而 body 的文字只会在视口至少为 400 像素宽，且设备横放时变为蓝色。
或：如果你有一组查询，且要其中的任何一个都可以匹配的话，那么你可以使用逗号分开这些查询。
@media screen and (min-width: 400px), screen and (orientation: landscape) {
body {
color: blue;
}
}
// 文本会在视口至少为 400 像素宽的时候或者设备处于横放状态的时候变为蓝色。如果其中的任何一项成立，那么查询就匹配上了。
非：你可以用not操作符让整个媒体查询失效，这就直接反转了整个媒体查询的含义。
@media not all and (orientation: landscape) {
body {
color: blue;
}
}
// 文本只会在朝向为竖着的时候变成蓝色。