CSS媒体查询综合分析（@media）

媒体查询是CSS样式表最重要的功能之一，所谓媒体查询是根据不同的设备（电脑、手机、平板电脑、盲文设备等）来区分的。事物。然后为每个定义不同的 CSS 样式。媒体查询可以让 CSS 在不同设备上或同一设备上不同条件下更准确地工作，因此所有用户都可以获得更好的用户体验。

1. 媒体类型

媒体类型用于指示设备的类别。 CSS提供了几个关键字来代表不同的媒体类型，如下表所示。

2. 媒体特点

除了特定类型之外，还可以使用一些属性来描述设备的特定特性，例如宽度、高度和分辨率，如下表所示。

3. 逻辑运算符

逻辑运算符包括 not、and、and only。可以使用逻辑运算符创建复杂的媒体查询。您还可以通过用逗号分隔多个媒体查询将它们合并到一个规则中。

• and：用于将多个媒体查询合并为一个媒体查询，如果每个查询规则都为 true，则该媒体查询也为 true。此外，and 运算符还可以组合媒体特征和媒体类型。
• not：用于否定媒体查询。如果查询规则不为 true，则返回 true，否则返回 false。如果使用 not 运算符，则还必须指定媒体类型。
• only：仅当整个查询匹配时才启用。如果使用唯一运算符，则还必须指定媒体类型。

目前，您可以通过两种方式定义媒体查询：

• 使用@media或@import规则在样式表中指定相应的设备类型。
• 使用 media 属性在 <style>、<link>、<source> 或其他 HTML 元素中指定特定设备类型。

1）@媒体

@media 允许您指定一系列媒体查询和 CSS 样式块。仅当媒体查询与所使用的设备匹配时，指定的 CSS 样式才会应用于文档。示例代码如下。

 /* 992 ピクセル以下の画面では、背景色を青に設定 */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* 600 ピクセル以下の画面では、背景色をオリーブに設定 */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
} 

2）@导入

使用@import导入指定的外部样式文件并指定目标媒体类型。示例代码如下。

 @import url("css/screen.css") screen; 
@import url("css/print.css") print; 
body { background: #f5f5f5; line-height: 1.2; } 

注意：所有@import语句必须放在样式表的开头，样式表中定义的样式将覆盖导入的外部样式表中任何冲突的样式。

3）媒体属性

您还可以在标签的媒体属性中定义媒体查询，例如 <style>、<link> 和 <source>。示例代码如下。

 /* ページの幅が900ピクセル以上の場合、このスタイルを適用する */
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
/* ページの幅が600ピクセル以下の場合、このスタイルを適用する */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css"> 

提示：您还可以在媒体属性中指定多种媒体类型。用逗号分隔每种媒体类型，例如 media=”screen, print”。