【前端】CSS媒体查询响应式设计详解：@media (max-width: 600px) {……}

这是一个CSS媒体查询（Media Query），用于响应式网页设计。让我详细解释一下：

基本语法

@media (max-width: 600px) {
    /* 在这里编写只在屏幕宽度小于等于600px时生效的CSS规则 */
}

作用

当浏览器视口（viewport）宽度小于或等于600px时，大括号内的CSS样式才会生效。

实际应用示例

/* 默认样式（所有屏幕尺寸） */
.container {
    width: 80%;
    margin: 0 auto;
}

.sidebar {
    width: 25%;
    float: left;
}

/* 移动端样式（屏幕宽度≤600px时生效） */
@media (max-width: 600px) {
    .container {
        width: 95%;
    }
    
    .sidebar {
        width: 100%;
        float: none;
    }
    
    .menu {
        display: none; /* 在小屏幕上隐藏菜单 */
    }
    
    .mobile-menu {
        display: block; /* 显示移动端菜单 */
    }
}

常见应用场景

1. 移动端适配 - 为手机等小屏幕设备优化布局
2. 响应式导航 - 将水平导航改为汉堡菜单
3. 字体大小调整 - 在小屏幕上调整字号
4. 布局重构 - 将多列布局改为单列

相关媒体查询

/* 最小宽度查询 */
@media (min-width: 768px) {
    /* 屏幕宽度≥768px时生效 */
}

/* 范围查询 */
@media (min-width: 600px) and (max-width: 1200px) {
    /* 屏幕宽度在600px-1200px之间时生效 */
}

这种媒体查询是现代响应式网页设计的核心工具之一。