钟文志的部落格

CSS3 媒体查询（Media Queries）是一种强大的工具，允许开发者根据不同的设备特性（如屏幕宽度、高度、分辨率等）来应用不同的样式，从而实现响应式设计。以下是媒体查询的基本用法和一些高级技巧。

基本语法

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

css

@media 媒体类型 and (条件) {
    /* CSS 规则 */
}

常见的媒体类型包括 screen、print、all 等。条件通常是关于设备的特性，比如宽度、高度、分辨率等。

常用媒体查询示例

响应式布局：根据屏幕宽度来调整布局。

css

/* 针对小屏幕设备（如手机） */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
    .container {
        flex-direction: column;
    }
}

/* 针对中等屏幕设备（如平板电脑） */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    body {
        background-color: lightgreen;
    }
    .container {
        flex-direction: row;
    }
}

/* 针对大屏幕设备（如台式电脑） */
@media screen and (min-width: 1025px) {
    body {
        background-color: lightcoral;
    }
    .container {
        flex-direction: row;
    }
}

设备方向：根据设备的方向（横向或纵向）来调整样式。

css

/* 针对纵向模式（竖屏） */
@media screen and (orientation: portrait) {
    body {
        font-size: 14px;
    }
}

/* 针对横向模式（横屏） */
@media screen and (orientation: landscape) {
    body {
        font-size: 16px;
    }
}

设备分辨率：根据设备的分辨率来调整样式。

css

/* 针对高分辨率设备（如 Retina 屏幕） */
@media screen and (min-resolution: 192dpi) {
    .image {
        background-image: url('high-res-image.png');
    }
}

/* 针对低分辨率设备 */
@media screen and (max-resolution: 191dpi) {
    .image {
        background-image: url('low-res-image.png');
    }
}

高级用法

组合查询：可以组合多个条件来实现更复杂的媒体查询。

css

/* 针对大屏幕设备的横向模式 */
@media screen and (min-width: 1024px) and (orientation: landscape) {
    .sidebar {
        display: block;
    }
}

媒体查询中的逻辑操作：可以使用 and、not 和 only 逻辑操作符来组合或排除条件。

css

/* 仅应用于屏幕设备，不包括打印 */
@media only screen and (max-width: 600px) {
    .menu {
        display: none;
    }
}

/* 排除小屏幕设备 */
@media not screen and (max-width: 600px) {
    .menu {
        display: block;
    }
}

媒体查询范围：可以使用范围条件来设置特定区间的媒体查询。

css

/* 针对宽度在 600px 到 1200px 之间的设备 */
@media screen and (min-width: 600px) and (max-width: 1200px) {
    .container {
        padding: 20px;
    }
}

媒体查询的最佳实践

移动优先：采用移动优先的设计理念，即首先为移动设备设计样式，然后使用媒体查询为更大屏幕的设备添加样式。

css

/* 默认移动设备样式 */
body {
    font-size: 14px;
}

/* 针对大屏幕设备 */
@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

避免过多的媒体查询：过多的媒体查询可能会增加样式表的复杂性和维护成本。应尽量使用通用的设计方案，减少对特定设备或屏幕尺寸的依赖。
测试和调试：使用浏览器的开发者工具进行测试和调试，以确保不同设备上的样式效果符合预期。

总结

CSS3 媒体查询是实现响应式设计的关键工具。通过合理使用媒体查询，可以根据不同设备特性动态调整样式，从而提升用户体验。无论是简单的屏幕宽度调整，还是复杂的组合条件，都可以通过媒体查询实现灵活的布局和设计。

基本语法 ​

常用媒体查询示例 ​

高级用法 ​

媒体查询的最佳实践 ​

总结 ​

基本语法

常用媒体查询示例

高级用法

媒体查询的最佳实践

总结