css 媒体查询

CSS 媒体查询（Media Queries）是一种技术，允许网页开发者根据不同的设备特征（例如屏幕尺寸、分辨率等）应用不同的样式规则。这对于创建响应式网页设计至关重要，可以确保网站在各种设备上都能良好显示。

基本语法

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

@media mediatype and|not|only (media feature) {
    /* CSS rules go here */
}

mediatype：媒体类型，常见的有 all、print、screen 等，默认screen。
and|not|only：逻辑操作符，用于组合多个媒体特性。
and：必须同时满足所有条件。
not：不满足条件。
only：仅在满足条件时应用样式，用于避免旧版浏览器的错误解析。
media feature：媒体特性，例如 width、height、orientation 等。

屏幕分辨率
屏幕分辨率通常指的是屏幕的物理尺寸和像素密度。在CSS中，我们通常使用 resolution 媒体特性来针对不同分辨率的设备应用样式。但是，值得注意的是，resolution 主要用于打印媒体，对于屏幕来说，更常用的特性是 min-resolution 和 max-resolution，它们可以用来检测屏幕的DPI（每英寸点数）。

设备屏幕的宽度和高度(device-height|device-width) = 分辨率(width|height)/缩放比
screen视口(width|height) = 分辨率(width|height)/缩放比 - 边框(标签栏、地址栏、书签栏、任务栏)(height)
如：分辨率2560 * 1600，缩放175%，设备屏幕宽高=1462 * 914px，视口宽高=1462 * 790px

常用媒体特性

1. 宽度和高度
   width: 视口的宽度。
   height: 视口的高度。
   示例：@media (min-width: 600px) { … }
2. 设备特性
   min-device-width, max-device-width, min-device-height, max-device-height: 设备屏幕的宽度和高度。
   示例：@media (min-device-width: 800px) { … }
3. 方向
   orientation: 设备的方向，可以是 portrait（纵向）或 landscape（横向）。
   示例：@media (orientation: landscape) { … }
4. 分辨率
   resolution: 设备的分辨率，例如 192dpi 或 2x。
   示例：@media (min-resolution: 2dppx) { … }

示例

示例1：为小屏幕设备设置样式

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

示例2：横向模式下的样式调整

@media (orientation: landscape) {
    body {
        margin: 20px;
    }
}

示例3：结合多个媒体特性

@media (min-width: 600px) and (orientation: landscape) {
    body {
        font-size: 18px;
    }
}

通过使用媒体查询，可以创建出既美观又适应不同设备的网页。