CSS3学习教程，从入门到精通，CSS3 媒体查询实现响应式布局语法指南（21）

CSS3 媒体查询实现响应式布局语法指南

一、媒体查询核心语法

1. 基础语法结构

css 复制代码

@media 媒体类型 and (媒体特性) {
  /* 匹配条件时应用的CSS规则 */
}

2. 媒体类型（可省略）

类型值	说明
`all`	所有设备（默认值）
`screen`	屏幕设备
`print`	打印机设备
`speech`	屏幕阅读器

3. 常用媒体特性

特性名称	说明	单位/值示例
`width`	视口宽度	px, em, rem
`min-width`	视口最小宽度	600px
`max-width`	视口最大宽度	1024px
`orientation`	设备方向	portrait/landscape
`aspect-ratio`	视口宽高比	16/9
`resolution`	设备分辨率	300dpi
`hover`	主输入方式是否支持悬停	hover/none

4. 逻辑操作符

css 复制代码

/* AND逻辑（同时满足） */
@media screen and (min-width: 768px) and (max-width: 1024px) {}

/* OR逻辑（逗号分隔） */
@media (max-width: 600px), (orientation: portrait) {}

/* NOT逻辑 */
@media not screen and (color) {}

5. 断点设置参考

设备类型	典型断点范围
手机（竖屏）	< 576px
手机（横屏）	576px - 767px
平板	768px - 991px
桌面	992px - 1199px
大屏桌面	≥ 1200px

二、完整案例代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局案例</title>
    <style>
        /* 基础样式 - 移动优先 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .container {
            padding: 15px;
        }

        /* 导航样式 */
        .nav {
            background: #333;
            padding: 1rem;
        }

        .nav-list {
            list-style: none;
            display: flex;
            flex-direction: column; /* 移动端垂直排列 */
            gap: 10px;
        }

        .nav-item {
            color: white;
            padding: 0.5rem;
            text-align: center;
            background: #666;
        }

        /* 主内容区 */
        .main-content {
            margin: 20px 0;
            padding: 15px;
            background: #f0f0f0;
        }

        /* 侧边栏 */
        .sidebar {
            padding: 15px;
            background: #e0e0e0;
        }

        /* 平板设备（≥768px） */
        @media screen and (min-width: 768px) {
            .nav-list {
                flex-direction: row; /* 水平排列导航 */
                justify-content: space-around;
            }

            .content-wrapper {
                display: flex;
                gap: 20px;
            }

            .main-content {
                flex: 3; /* 主内容占3份 */
            }

            .sidebar {
                flex: 1; /* 侧边栏占1份 */
            }
        }

        /* 桌面设备（≥992px） */
        @media screen and (min-width: 992px) {
            .container {
                max-width: 1200px;
                margin: 0 auto;
            }

            .nav-list {
                justify-content: flex-start; /* 左对齐导航项 */
                gap: 30px;
            }

            .nav-item {
                padding: 1rem 2rem;
            }
        }

        /* 大屏幕设备（≥1200px） */
        @media screen and (min-width: 1200px) {
            .main-content {
                font-size: 1.1rem;
            }

            .sidebar {
                padding: 30px;
            }
        }

        /* 打印样式 */
        @media print {
            .nav, .sidebar {
                display: none;
            }

            .main-content {
                background: white;
                color: black;
            }
        }
    </style>
</head>
<body>
    <nav class="nav">
        <ul class="nav-list">
            <li class="nav-item">首页</li>
            <li class="nav-item">产品</li>
            <li class="nav-item">服务</li>
            <li class="nav-item">关于</li>
        </ul>
    </nav>
    
    <div class="container">
        <div class="content-wrapper">
            <main class="main-content">
                <h2>欢迎访问</h2>
                <p>这是一个响应式布局的演示页面...</p>
            </main>
            <aside class="sidebar">
                <h3>最新消息</h3>
                <p>响应式设计专题更新...</p>
            </aside>
        </div>
    </div>
</body>
</html>

三、代码注释说明

移动优先策略

基础样式针对小屏幕设备编写
使用flex-direction: column实现垂直布局

平板适配（768px+）

将导航项改为水平排列
创建flex容器实现内容区与侧边栏的并排布局
使用flex比例分配空间（3:1）

桌面适配（992px+）

添加最大宽度限制并居中容器
调整导航项的间距和对齐方式
增大导航项的点击区域

大屏优化（1200px+）

增大正文字号提升可读性
增加侧边栏内边距

打印样式优化

隐藏非必要元素（导航、侧边栏）
调整背景色保证打印效果

四、注意事项

视口设置

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

必须包含此meta标签才能确保媒体查询在移动端生效

单位选择建议

优先使用相对单位（rem/em/%）
需要精确控制时使用px

断点设置技巧

根据内容变化设置断点，而非特定设备尺寸
使用Chrome开发者工具设备模式进行测试

性能优化

避免过多的媒体查询分段
将公共样式提取到基础规则中

现代布局结合

配合flexbox/grid布局使用效果更佳
结合CSS自定义属性实现动态样式调整

建议通过实际调整浏览器窗口大小，观察不同断点下的布局变化，加深对媒体查询工作机制的理解。

以下是开发中常用的CSS3媒体查询实际案例，结合不同场景和布局需求，提供具体代码实现及说明：

一、多列布局响应式调整

场景：根据屏幕宽度动态调整列数和布局样式

html 复制代码

<style>
.container { display: flex; flex-wrap: wrap; }

/* 默认四列布局（≥1200px）*/
.box { 
  width: 25%; 
  padding: 15px;
  border: 2px solid green;
}

/* 平板：三列布局（768-1199px） */
@media (max-width: 1199px) {
  .box { 
    width: 33.33%; 
    border-color: blue;
  }
}

/* 手机横屏：两列布局（480-767px） */
@media (max-width: 767px) {
  .box { 
    width: 50%; 
    padding: 10px;
  }
}

/* 手机竖屏：单列布局（<480px） */
@media (max-width: 479px) {
  .box { 
    width: 100%; 
    border-color: red;
  }
}
</style>

特点：结合Flex布局实现动态列数变化，通过边框颜色直观显示当前布局模式。

二、内容动态显示优化

场景：根据设备宽度显示/隐藏特定内容

css 复制代码

/* 桌面端显示完整地址 */
.contact-info::after {
  content: "（联系电话：400-800-1234）";
}

/* 移动端隐藏电话号码 */
@media (max-width: 768px) {
  .contact-info::after {
    content: "";
  }
  
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}

特点：通过伪元素动态调整显示内容，优化移动端信息展示。

三、响应式导航栏改造

场景：移动端折叠菜单与桌面端水平菜单切换

css 复制代码

.nav {
  background: #333;
  padding: 1rem;
}

/* 移动端垂直菜单 */
.nav-list {
  flex-direction: column;
  display: none;
}

.menu-icon { display: block; }

/* 桌面端水平菜单 */
@media (min-width: 992px) {
  .menu-icon { display: none; }
  .nav-list {
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }
}

特点：通过媒体查询实现导航栏形态切换，配合JavaScript实现移动端菜单交互。

四、打印样式优化

场景：优化页面打印效果

css 复制代码

@media print {
  .ad-banner, .side-menu {
    display: none;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: none;
  }
  
  a::after {
    content: " (" attr(href) ")";
  }
}

特点：隐藏非必要元素、调整文字样式、自动显示链接地址。

五、高清屏幕适配

场景：为Retina屏幕提供高清图片

css 复制代码

.logo {
  background-image: url(logo.png);
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
  .logo {
    background-image: url([email protected]);
    background-size: contain;
  }
}

特点：通过分辨率检测适配高清显示屏。

六、方向检测布局

场景：根据设备方向调整布局

css 复制代码

/* 竖屏布局 */
@media (orientation: portrait) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

/* 横屏布局 */
@media (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

特点：利用设备方向特性优化内容展示方式。

最佳实践建议：

采用移动优先策略，先编写基础样式再添加媒体查询扩展
使用相对单位（rem/%）而非固定像素值
结合CSS Grid/Flexbox实现复杂响应式布局
通过Chrome DevTools设备模式测试多断点效果
对IE等老旧浏览器使用Respond.js兼容方案