CSS媒体查询的用法

媒体查询：根据设备显示器的特性（如视窗宽度、屏幕宽度、设备方向等）来设定不同的CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

一、媒体查询的使用方法

1、外链式：在head标签的内部使用 link 标签引入外部css文件

<head>
  <link rel="stylesheet" media="(min-width: 1200px)" href="test.css" />
</head>

min-width: 1200px 表示当视窗宽度大于等于1200px时，该样式生效。

2、内部方式：使用内部样式表，写在 style 标签里面

<style>
@media (max-width: 1200px) {
  .test{
    width: 800px;
  }
}
</style>

max-width: 1200px 表示当视窗宽度小于等于1200px时，该样式生效。

二、媒体查询的语法

<style>
@media mediaType and (mediaFeature ) {
   选择器 {
     属性名：属性值
   }
}
// 多个媒体特性
@media mediaType and (mediaFeature ) and (mediaFeature ) {
   选择器 {
     属性名：属性值
   }
}
</style>

1. mediaType - 媒体类型（默认all）：

all: 所有的多媒体设备
print: 打印机或打印预览
screen：电脑屏幕、平板电脑、智能手机等
speech：屏幕阅读器等发声设备

示例：

@media screen {
  .test{
    background-color: blue;
  }
}

2. mediaFeature - 媒体特性表达式

常用媒体特性：

width：视窗宽度
height:：视窗高度
max-width：最大视窗宽度
min-width：最小视窗宽度
device-width：设备屏幕宽度
max-device-width：最大设备屏幕宽度
min-device-width：最小设备屏幕宽度
orientation：设备方向（landscape - 横屏；portrait - 竖屏）

示例：

@media (max-width:1200px) {
  .test{
    background-color: pink;
  }
}

上面表示：当视窗宽度小于等于1200px时，背景色为粉色。

3. 关键字

1）and

多个媒体特性，使用and关键字。

@media screen and (min-width: 600px) and (max-width: 900px) {
  .test {
    background-color: red;
  }
}

上面表示：当视窗宽度在600px~900px之间时，背景色为红色。

2）not

not关键字用来排除符合表达式的设备，表示对后面的表达式执行取反操作。

// 非打印设备，该样式生效
@media not print { 样式代码 }

// 在除打印设备和视窗宽度小于1200px的所有设备中，该样式生效
@media not print and (max-width: 1200px) { 样式代码 }

3）only

only关键字表示仅在媒体查询匹配成功时样式生效

// 只在screen设备生效
@media only screen { 样式代码 }

4. 逗号分隔列表

当使用媒体查询的逗号分隔列表时，如果列表中的任一媒体查询为true，样式都会生效（相当于“或”逻辑）。在逗号分隔列表中的每个媒体查询都被作为独立查询对待，运用到一个媒体查询上的任何操作符都不影响其它的。

@media print and (max-width:480px), screen and (min-width:960px) { 样式代码 }

上面表示：在宽度小于或等于480px的打印预览上或者视窗宽度大于等于960px的screen设备上，该样式生效。

记录于2023-08-23。