媒体查询（Media Queries）

媒体查询（Media Queries）是 CSS3 中的一个特性，它允许你根据设备的特性（如宽度、高度、颜色等）来应用不同的 CSS 样式。这使得开发者能够为不同的设备（如桌面电脑、平板电脑、手机等）或同一设备的不同状态（如横屏或竖屏）创建特定的布局和样式。

媒体查询由两部分组成：媒体类型（Media Type）和媒体特性（Media Features）。

媒体类型：描述了设备的一般类别，如 all（所有设备）、screen（电脑屏幕、平板电脑、智能手机等）、print（打印机和打印预览）等。

媒体特性：描述了设备的具体特性，如 width（视口宽度）、height（视口高度）、color（设备颜色位数）等。

媒体查询的基本语法如下：

1
2
3
4
css
@media mediaType and (mediaFeature1: value1) and (mediaFeature2: value2) {  
    /* CSS 规则 */  
}

例如，如果你想为宽度小于 768px 的设备设置特定的样式，你可以这样写：

1
2
3
4
5
6
css
@media screen and (max-width: 767px) {  
    body {  
        background-color: lightblue;  
    }  
}

在这个例子中，媒体类型是 screen，媒体特性是 max-width: 767px。这意味着当屏幕宽度小于或等于 767px 时，body 的背景色将变为浅蓝色。

媒体查询是响应式设计的核心，它允许开发者创建一个灵活且适应各种设备的网站。

媒体查询中的分辨率设置主要依赖于具体的设备特性，并没有固定的分辨率列表。但是，你可以根据常见的设备和屏幕尺寸来设置媒体查询。
以下是一些常见的屏幕分辨率和对应的CSS媒体查询：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
1024x768 (常用于10.4、12.1、14.1、15寸电脑)：

css
@media screen and (min-width: 1024px) and (max-width: 1279px) {  
    /* 样式 */  
}
1280x1024 (常用于14.1、15寸电脑)：

css
@media screen and (min-width: 1280px) and (max-width: 1629px) {  
    /* 样式 */  
}
1280x800 (常用于15.4寸电脑)：

css
@media screen and (min-width: 1280px) and (max-width: 1599px) {  
    /* 样式 */  
}
1366x768 (常用于15.2寸电脑)：

css
@media screen and (min-width: 1366px) and (max-width: 1629px) {  
    /* 样式 */  
}
1440x900 (常用于15.6、17寸电脑)：

css
@media screen and (min-width: 1440px) and (max-width: 1799px) {  
    /* 样式 */  
}
1600x900 (常用于15.4、20寸电脑)：

css
@media screen and (min-width: 1600px) and (max-width: 1899px) {  
    /* 样式 */  
}
1920x1080 (常用于主流23、24、27寸电脑)：

css
@media screen and (min-width: 1920px) {  
    /* 样式 */  
}