4. 响应式设计基础：媒体查询入门、断点策略、移动优先原则

各位同学，今天我们来聊聊响应式设计。说实话，我刚入行那会儿，前端开发还停留在「一套代码打天下」的阶段。后来移动端爆发了，老板拿着手机说：「这页面怎么挤成一团了？」——嗯，从那以后，响应式设计就成了我的必修课。

这一章，我会带你从零搭建响应式思维。咱们不讲虚的，直接上干货。

4.1 媒体查询（Media Query）入门

媒体查询，说白了就是给CSS加个「条件判断」。当屏幕满足某个条件时，就加载对应的样式。比如：

/* 当屏幕宽度小于等于768px时 */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

这段代码的意思是：如果浏览器窗口宽度 ≤ 768px，就把容器的内边距改成10px。是不是很简单？

我个人习惯把媒体查询写在对应选择器的下方，这样维护起来一目了然。你可能会问：为什么不单独写一个文件？嗯，小项目可以，但大项目里，样式和逻辑分离反而容易找不着北。

4.2 断点（Breakpoint）策略

断点，就是触发样式变化的临界值。选对断点，响应式就成功了一半。

我曾经踩过一个坑：按照iPhone、iPad、Mac的尺寸来设断点。结果呢？新设备一出，全乱了。后来我学乖了——断点应该基于内容，而不是设备。

这里分享一套我常用的断点策略：

断点名称	宽度范围	典型设备
手机竖屏	0 - 480px	小屏手机
手机横屏	481px - 768px	大屏手机、小平板
平板	769px - 1024px	iPad、Surface
桌面	1025px - 1440px	笔记本、台式机
大屏	1441px 以上	4K显示器、电视

注意，这只是参考。你完全可以根据自己的设计来调整。比如我做后台管理系统时，就把桌面断点改成了1200px，因为表格在1200px以下就开始变形了。

4.3 移动优先原则

移动优先，就是先写小屏样式，再用媒体查询逐步增强大屏效果。为什么这么做？

你想想看，移动端的资源更受限——屏幕小、网络慢、CPU弱。如果我们先写好桌面版，再通过媒体查询去「删减」功能，那移动端用户就得加载一堆用不上的代码。反过来，先写移动端，再「增加」功能，性能自然更好。

代码上怎么体现？看这个例子：

/* 移动优先：默认样式 */
.card {
  width: 100%;
  margin-bottom: 16px;
}

/* 平板及以上：两列布局 */
@media (min-width: 768px) {
  .card {
    width: 48%;
    margin-right: 2%;
  }
}

/* 桌面：三列布局 */
@media (min-width: 1024px) {
  .card {
    width: 31%;
    margin-right: 2%;
  }
}

注意，这里用的是 min-width，而不是 max-width。这就是移动优先的核心——从小屏往上写，而不是从上往下缩。

我个人习惯在项目开始时，先用手机模拟器把核心功能跑通。等移动端没问题了，再逐步适配平板和桌面。这样效率最高，也最不容易遗漏。

4.4 知识体系总览

下面这张图，帮你把本章的核心逻辑串起来：

这张图展示了响应式设计的三个核心支柱。媒体查询是工具，断点策略是方法，移动优先是原则。三者缺一不可。

好了，这一章就到这里。记住：响应式设计不是「适配所有设备」，而是「让内容在任何屏幕上都舒服」。下一章我们会深入实战，用Flexbox和Grid来搭建真正的响应式布局。