@media - 媒体查询

一、使用场景

在 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 规则。
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css"> ；宽度大于 900px 的屏幕使用该样式

四、使用提升

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;
    }
}
// 文本只会在朝向为竖着的时候变成蓝色。

3、only

only: only 运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。 当不使用 only 时，旧版本的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将其样式应用于所有屏幕。 如果使用 only 运算符，则还必须指定媒体类型。

五、媒体类型

六、媒体功能