css媒体查询，看这篇就够了

CSS媒体查询（Media Queries）允许你根据设备的特性（如宽度、高度、方向、分辨率等）应用不同的样式规则。这对于响应式网页设计非常有用，可以根据不同的屏幕尺寸和设备类型提供优化的用户体验。

基本语法

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

@media 媒体类型 and (媒体特性) {
    /* 样式规则 */
}

示例

1. 根据屏幕宽度应用不同样式

/* 当屏幕宽度小于600px时应用这些样式 */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

/* 当屏幕宽度大于或等于600px时应用这些样式 */
@media screen and (min-width: 600px) {
    body {
        background-color: lightgreen;
    }
}

2. 根据设备方向应用不同样式

/* 当设备处于纵向模式时应用这些样式 */
@media screen and (orientation: portrait) {
    body {
        background-color: lightyellow;
    }
}

/* 当设备处于横向模式时应用这些样式 */
@media screen and (orientation: landscape) {
    body {
        background-color: lightpink;
    }
}

3. 根据设备分辨率应用不同样式

/* 当设备分辨率大于或等于120dpi时应用这些样式 */
@media screen and (min-resolution: 120dpi) {
    body {
        font-size: 20px;
    }
}

常用媒体特性

• width 和 height：基于视口的宽度和高度。
• device-width 和 device-height：基于设备屏幕的宽度和高度。
• orientation：设备的方向，可以是 portrait（纵向）或 landscape（横向）。
• aspect-ratio 和 device-aspect-ratio：视口或设备屏幕的宽高比。
• resolution：设备的分辨率。
• color 和 color-index：颜色和颜色索引。
• monochrome：单色位深度。

媒体类型

• all：适用于所有设备。
• print：适用于打印预览模式。
• screen：适用于计算机屏幕、平板电脑、智能手机等。

多个条件

你可以使用逻辑运算符 and、not 和 only 以及逗号分隔的多个媒体查询来组合条件。

/* 当屏幕宽度在600px到1200px之间时应用这些样式 */
@media screen and (min-width: 600px) and (max-width: 1200px) {
    body {
        background-color: lightcoral;
    }
}

/* 当屏幕宽度小于600px或大于1200px时应用这些样式 */
@media screen and (max-width: 600px), screen and (min-width: 1200px) {
    body {
        background-color: lightcyan;
    }
}

实际应用

媒体查询在响应式设计中非常常见，通常用于调整布局、字体大小、间距等，以适应不同的设备和屏幕尺寸。例如，你可以在小屏幕上隐藏某些元素，在大屏幕上显示更多的内容。

/* 小屏幕设备 */
@media screen and (max-width: 600px) {
    .sidebar {
        display: none;
    }
}

/* 大屏幕设备 */
@media screen and (min-width: 600px) {
    .sidebar {
        width: 300px;
        float: left;
    }
}

希望这些示例和解释对你有所帮助。如果有任何疑问或需要进一步的解释，请随时提问。

PS:学会了记得，点赞，评论，收藏，分享