媒体查询（响应式布局基础，适配手机/平板/电脑）

17.1 响应式布局的定义

什么是响应式布局？

响应式布局是指网页能够根据用户设备的屏幕尺寸自动调整布局，在手机、平板、电脑等不同设备上都能正常显示。

响应式布局的核心思想

流动布局：使用相对单位（%、em、rem）代替固定单位（px）
弹性图片：图片能够自适应容器大小
媒体查询：根据设备特性应用不同的CSS样式

17.2 媒体查询语法

基本语法

css

@media 条件 {
  /* CSS样式 */
}

常用条件

min-width：最小宽度
max-width：最大宽度
min-height：最小高度
max-height：最大高度
orientation：屏幕方向（portrait/portrait、landscape/横屏）

示例

css

/* 屏幕宽度小于768px */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* 屏幕宽度大于1024px */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

/* 屏幕宽度在768px到1024px之间 */
@media (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

17.3 常用设备尺寸断点

设备类型	断点范围	说明
手机	< 768px	小屏幕设备
平板	768px - 1024px	中等屏幕设备
桌面	> 1024px	大屏幕设备

常用断点设置

css

/* 手机 */
@media (max-width: 767px) {
  /* 手机样式 */
}

/* 平板 */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 平板样式 */
}

/* 桌面 */
@media (min-width: 1024px) {
  /* 桌面样式 */
}

17.4 响应式布局技巧

流动布局

使用相对单位代替固定单位。

css

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.column {
  width: 50%; /* 相对单位 */
  padding: 2%; /* 相对单位 */
}

弹性图片

css

img {
  max-width: 100%;
  height: auto;
}

隐藏/显示元素

css

/* 手机上隐藏侧边栏 */
@media (max-width: 767px) {
  .sidebar {
    display: none;
  }
}

/* 桌面上显示侧边栏 */
@media (min-width: 768px) {
  .sidebar {
    display: block;
  }
}

17.5 新手避坑：媒体查询的顺序

问题描述

媒体查询的顺序会影响样式的应用。

正确顺序

建议按照从小到大的顺序书写媒体查询。

css

/* 基础样式（手机优先） */
body {
  font-size: 14px;
}

/* 平板 */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }
}

避免样式冲突

确保媒体查询的条件不会相互覆盖。

17.6 实战：制作响应式导航栏、响应式卡片布局

实战目标

创建响应式导航栏和卡片布局，适配不同设备。

实战步骤

创建HTML文件：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS媒体查询实战</title>
  <style>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <!-- 响应式导航栏 -->
  <nav class="navbar">
    <div class="nav-brand">Logo</div>
    <button class="nav-toggle" id="navToggle">☰</button>
    <ul class="nav-menu" id="navMenu">
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>
  
  <!-- 响应式卡片布局 -->
  <div class="container">
    <h1>响应式卡片布局</h1>
    <div class="cards">
      <div class="card">
        <h3>卡片1</h3>
        <p>这是卡片1的内容描述。</p>
      </div>
      <div class="card">
        <h3>卡片2</h3>
        <p>这是卡片2的内容描述。</p>
      </div>
      <div class="card">
        <h3>卡片3</h3>
        <p>这是卡片3的内容描述。</p>
      </div>
      <div class="card">
        <h3>卡片4</h3>
        <p>这是卡片4的内容描述。</p>
      </div>
    </div>
  </div>
</body>
</html>

添加CSS样式：

css

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background-color: #f5f5f5;
}

/* 基础样式（手机优先） */
.navbar {
  background-color: #333;
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  font-size: 24px;
  font-weight: bold;
}

.nav-toggle {
  display: block;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

.nav-menu {
  display: none;
  list-style: none;
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  background-color: #333;
}

.nav-menu.active {
  display: block;
}

.nav-menu li {
  border-bottom: 1px solid #555;
}

.nav-menu a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
}

.nav-menu a:hover {
  background-color: #555;
}

/* 容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.container h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

/* 卡片布局（手机：单列） */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.card {
  background-color: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card h3 {
  color: #333;
  margin-bottom: 10px;
}

.card p {
  color: #666;
}

/* 平板（768px以上） */
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
  
  .nav-menu {
    display: flex !important;
    position: static;
    width: auto;
    background: none;
  }
  
  .nav-menu li {
    border: none;
    margin-left: 30px;
  }
  
  .nav-menu a {
    padding: 5px 10px;
    border-radius: 4px;
  }
  
  /* 卡片布局（平板：两列） */
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 桌面（1024px以上） */
@media (min-width: 1024px) {
  /* 卡片布局（桌面：四列） */
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

添加JavaScript：

javascript

// 导航栏切换
document.getElementById('navToggle').addEventListener('click', function() {
  document.getElementById('navMenu').classList.toggle('active');
});

运行页面：在浏览器中打开文件，调整窗口大小观察效果

预期效果

手机：导航栏显示汉堡菜单，卡片单列显示
平板：导航栏水平显示，卡片两列显示
桌面：导航栏水平显示，卡片四列显示

媒体查询（响应式布局基础，适配手机/平板/电脑） ​

17.1 响应式布局的定义 ​

什么是响应式布局？ ​

响应式布局的核心思想 ​

17.2 媒体查询语法 ​

基本语法 ​

常用条件 ​

示例 ​

17.3 常用设备尺寸断点 ​

推荐断点 ​

常用断点设置 ​

17.4 响应式布局技巧 ​

流动布局 ​

弹性图片 ​

隐藏/显示元素 ​

17.5 新手避坑：媒体查询的顺序 ​

问题描述 ​

正确顺序 ​

避免样式冲突 ​

17.6 实战：制作响应式导航栏、响应式卡片布局 ​

实战目标 ​

实战步骤 ​

预期效果 ​

媒体查询（响应式布局基础，适配手机/平板/电脑）

17.1 响应式布局的定义

什么是响应式布局？

响应式布局的核心思想

17.2 媒体查询语法

基本语法

常用条件

示例

17.3 常用设备尺寸断点

推荐断点

常用断点设置

17.4 响应式布局技巧

流动布局

弹性图片

隐藏/显示元素

17.5 新手避坑：媒体查询的顺序

问题描述

正确顺序

避免样式冲突

17.6 实战：制作响应式导航栏、响应式卡片布局

实战目标

实战步骤

预期效果