📱 第八章：媒体查询

掌握响应式设计的核心技术

8.1 基础语法

媒体查询允许你根据设备特性应用不同的样式。 
@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

媒体查询的组成部分

/* 基本媒体查询 */
@media screen and (min-width: 768px) {
    /* 平板及以上设备的样式 */
}

/* 多个条件 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* 平板设备的样式 */
}

/* 不同媒体类型 */
@media print {
    /* 打印样式 */
    body {
        font-size: 12pt;
        color: black;
    }
}

8.2 断点策略

Mobile First vs Desktop First

Mobile First 策略

/* 移动设备默认样式 */
.container {
    width: 100%;
    padding: 10px;
}

/* 平板断点 */
@media screen and (min-width: 768px) {
    .container {
        padding: 20px;
    }
}

/* 桌面断点 */
@media screen and (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

Desktop First 策略

/* 桌面默认样式 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 平板断点 */
@media screen and (max-width: 1024px) {
    .container {
        max-width: 100%;
    }
}

/* 移动设备断点 */
@media screen and (max-width: 768px) {
    .container {
        padding: 10px;
    }
}
推荐 Mobile First：从移动设备开始设计，然后逐步为更大的屏幕添加样式。这种方法更符合现代 web 开发的趋势，因为移动设备的使用量已经超过了桌面设备。

8.3 常见断点设置

设备类型 断点范围 建议媒体查询
移动设备 0 - 767px 默认样式
平板 768px - 1023px @media (min-width: 768px)
小型桌面 1024px - 1199px @media (min-width: 1024px)
大型桌面 1200px+ @media (min-width: 1200px)

方向断点

@media screen and (orientation: landscape) {
    /* 横屏样式 */
}

@media screen and (orientation: portrait) {
    /* 竖屏样式 */
}

8.4 打印样式

@media print {
    /* 隐藏不需要打印的元素 */
    .navbar,
    .sidebar,
    .footer {
        display: none;
    }
    
    /* 设置打印样式 */
    body {
        font-size: 12pt;
        color: black;
        background: white;
    }
    
    /* 确保链接显示完整 URL */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

实战案例

响应式导航栏

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    display: flex;
    gap: 20px;
}

.mobile-menu-btn {
    display: none;
}

@media screen and (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block;
    }
}

响应式网格

Item 1
Item 2
Item 3
.responsive-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.demo-item {
    flex: 1 1 300px;
}

@media screen and (max-width: 768px) {
    .demo-item {
        flex: 1 1 100%;
    }
}

动手练习

练习 1：基本媒体查询

  1. 创建一个简单的页面布局
  2. 为移动设备、平板和桌面设备设置不同的样式
  3. 测试不同屏幕尺寸下的显示效果

练习 2：响应式导航

  1. 创建一个导航栏
  2. 在桌面设备上水平显示导航链接
  3. 在移动设备上显示汉堡菜单按钮
  4. 添加简单的 JavaScript 实现菜单切换

练习 3：打印样式

  1. 为页面添加打印样式
  2. 隐藏导航、页脚等不需要打印的元素
  3. 设置适合打印的字体大小和颜色
  4. 测试打印预览效果
← 上一章：定位与层级 下一章：现代适应性特性 →