4、响应式设计：使用媒体查询，适配不同屏幕尺寸

说实话，响应式设计这个概念，早些年我总觉得是个「加分项」。直到有一次，我给客户做的后台管理系统，在客户的大屏显示器上完美无瑕，结果他拿iPad Pro一打开……嗯，布局全崩了。从那以后，我把响应式设计当成了必修课，而不是选修课。

今天咱们聊聊媒体查询。这是CSS3里最实用的功能之一。说白了，就是让页面「看人下菜碟」——屏幕大就多展示点内容，屏幕小就精简布局。

4.1 媒体查询的基本语法

先看个最简单的例子：

/* 当屏幕宽度小于等于768px时 */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
  .main-content {
    width: 100%;
  }
}

这段代码的意思是：屏幕宽度不超过768像素时，隐藏侧边栏，让主内容区占满整个宽度。我在项目中经常用这个套路，尤其是做移动端适配的时候。

媒体查询的完整语法其实更灵活：

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

媒体类型常用的有：

• screen —— 屏幕设备（电脑、手机、平板）
• print —— 打印机
• all —— 所有设备（默认值）

媒体特性就多了，我挑几个最常用的：

4.2 常见的断点设置

断点就是布局发生变化的临界点。我见过很多新手一上来就写「iPhone 6的宽度是375px，那就设375px」。千万别这么干！

设备型号更新太快了。今天iPhone 6，明天iPhone 15 Pro Max。你追不上的。正确的做法是：根据内容来定断点，而不是根据设备。

我个人常用的断点方案：

/* 手机：小于576px */
/* 平板：576px ~ 992px */
/* 桌面：大于992px */

/* 手机端（默认） */
.container {
  padding: 0 15px;
}

/* 平板 */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
    margin: 0 auto;
  }
}

/* 桌面 */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

/* 大屏 */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

你想想看，为什么是576、992、1200？其实没有标准答案。我刚开始做的时候也纠结过，后来发现只要保证内容在不同宽度下都「舒服」就行。Bootstrap用这些值，我也跟着用，省心。

4.3 响应式布局的核心技巧

光有媒体查询还不够，你得配合一些布局技巧。我总结了三个最实用的：

4.3.1 弹性网格

别用固定像素宽度。用百分比、fr 单位或者 calc()。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

这段代码什么意思？每列最小250px，如果空间够就平均分配。屏幕缩小时，列数自动减少。完全不用写媒体查询！

4.3.2 响应式图片

图片是响应式设计里的老大难。我见过太多页面因为图片太大，在手机上加载半天。

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

/* 或者用picture标签做更精细的控制 */
<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="响应式图片">
</picture>

大屏看大图，小屏看小图。既省流量，又保证清晰度。我在做电商项目时，这个技巧帮了大忙——商品图多，每张都压缩到合适尺寸，加载速度快了不少。

4.3.3 隐藏与显示

有些元素在手机上不需要展示。比如复杂的表格、侧边栏、大段的说明文字。

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
}

嗯，这里要注意：别滥用隐藏。隐藏只是视觉上消失了，DOM元素还在，资源还在加载。如果内容真的不需要，考虑用JavaScript动态加载。

4.4 知识体系总览

下面这张图是我自己整理的响应式设计核心逻辑，你看一眼就能明白整体脉络：

4.5 性能调优小贴士

响应式设计做不好，性能会受影响。我遇到过最典型的问题：

1. 媒体查询写太多 —— 有人一个页面写了30多个媒体查询，CSS文件膨胀到200KB。其实大部分可以合并。
2. 不必要的重排 —— 频繁切换显示/隐藏，浏览器要重新计算布局。用 visibility: hidden 代替 display: none 能减少重排。
3. 图片加载 —— 手机上加载了桌面版的大图，浪费带宽。用 srcset 和 sizes 属性精确控制。

好了，关于媒体查询和响应式设计，今天就聊到这儿。记住一句话：别追设备，追内容。内容在什么宽度下阅读最舒服，你的断点就设在哪里。这个思路，我用了好几年，从来没出过问题。

可可精品资料库