媒体查询学习笔记

什么是媒体查询？

媒体查询（Media Query）是 CSS3 新增的功能，它可以根据设备的不同特性来选择不同的样式表，最常用的就是为不同的屏幕尺寸设置不同的样式。通过使用媒体查询，我们可以让网站在不同设备上都能够完美地展现。

媒体查询的语法

媒体查询的语法如下：

Copy Code
@media mediatype and|not|only (media feature) {
    CSS Rules;
}

• mediatype：指的是媒体类型，如 screen、print、speech 等；
• and、not 和 only：是关键词，用于逻辑运算；
• media feature：是媒体特性，如 width、height、color、orientation 等；
• CSS Rules：是指需要应用到指定媒体类型的 CSS 样式。

常用的媒体查询

基于视口的媒体查询

视口（Viewport）是指浏览器中用于显示网页的区域。我们可以使用以下媒体特性来设置基于视口的媒体查询。

width 和 height

width 和 height 分别表示视口的宽度和高度。例如，我们可以使用以下代码来设置当视口宽度小于等于 768px 时应用的样式：

Copy Code
@media (max-width: 768px) {
    /* CSS Rules */
}

aspect-ratio 和 device-aspect-ratio

aspect-ratio 和 device-aspect-ratio 分别表示视口的宽高比和设备屏幕的宽高比。例如，我们可以使用以下代码来设置当视口宽高比为 16:9 时应用的样式：

Copy Code
@media (aspect-ratio: 16/9) {
    /* CSS Rules */
}

orientation

orientation 表示设备的方向，包括 landscape（横向）和 portrait（纵向）。例如，我们可以使用以下代码来设置当设备处于横向状态时应用的样式：

Copy Code
@media (orientation: landscape) {
    /* CSS Rules */
}

基于设备的媒体查询

除了基于视口的媒体查询之外，还可以根据设备的属性来设置媒体查询。

max-device-width 和 min-device-width

max-device-width 和 min-device-width 分别表示设备屏幕的最大宽度和最小宽度。例如，我们可以使用以下代码来设置当设备屏幕宽度小于等于 768px 时应用的样式：

Copy Code
@media (max-device-width: 768px) {
    /* CSS Rules */
}

resolution

resolution 表示设备屏幕的分辨率。例如，我们可以使用以下代码来设置当设备屏幕分辨率大于等于 300dpi 时应用的样式：

Copy Code
@media (min-resolution: 300dpi) {
    /* CSS Rules */
}

媒体查询的实例

我们可以通过以下实例来更好地理解媒体查询的用法：

Copy Code
/* 全局样式 */
body {
    font-size: 16px;
}

/* 当视口宽度小于等于 768px 时应用的样式 */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

/* 当设备屏幕为 Retina 屏幕时应用的样式 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* CSS Rules */
}

在这个实例中，当视口宽度小于等于 768px 时，网页中的文本大小会变为 14px；而当设备屏幕为 Retina 屏幕时，页面会有一些特定的样式。