CSS媒体查询实战教程：手机、平板、桌面端响应式适配方案

响应式页面的目标，是让同一套网页在手机、平板、笔记本和桌面显示器上都能正常阅读和操作。CSS 媒体查询是实现响应式适配最基础、也最常用的工具。

很多页面在桌面端看起来没问题，一到手机就出现文字太小、卡片挤压、按钮难点、横向滚动等问题。媒体查询可以根据屏幕宽度、设备特性或用户偏好应用不同样式，让布局在不同设备上更合理。

基础语法

媒体查询通常使用 @media 编写。最常见的是根据屏幕宽度设置样式，比如当视口宽度小于 768 像素时切换为移动端布局。

@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }
}

这段代码表示：当页面宽度不超过 768 像素时，布局从横向改为纵向。媒体查询里的样式只有满足条件时才会生效。

移动优先

现在很多项目推荐移动优先，也就是默认样式先照顾手机，再通过 min-width 为更大屏幕增强布局。

.card-list {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

移动优先的好处是基础样式更简单，也更符合当前移动端流量占比高的现实。桌面端只是逐步增强，而不是把桌面布局硬压到手机上。

断点怎么选

断点不是越多越好，也不应该完全照抄某个设备尺寸。更推荐根据布局什么时候“撑不住”来设置断点。

常见断点可以参考：小屏手机 480px，平板 768px，小桌面 1024px，大桌面 1200px。但实际项目中，要根据内容宽度、卡片尺寸、导航数量和设计稿来微调。

手机适配

手机端优先解决阅读和点击问题。常见处理包括：单列布局、增大按钮点击区域、减少左右边距、隐藏非核心装饰、让图片自适应宽度。

@media (max-width: 600px) {
  .page {
    padding: 16px;
  }

  .button {
    width: 100%;
    min-height: 44px;
  }
}

手机屏幕空间有限，不要把桌面端的多列布局强行缩小。该堆叠就堆叠，该隐藏次要信息就隐藏，但不要隐藏用户完成任务所需的核心内容。

平板适配

平板介于手机和桌面之间，适合两列布局、较宽的内容区和更灵活的卡片排列。很多项目忽略平板，导致页面既不像手机，也不像桌面。

@media (min-width: 768px) and (max-width: 1023px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

平板端要特别注意横竖屏切换。不要只在一个方向看设计稿，真实用户可能会频繁旋转设备。

桌面适配

桌面端空间更大，可以使用多列布局、侧边栏、固定宽度内容区和更大的间距。但也要避免内容行宽过长，影响阅读。

@media (min-width: 1200px) {
  .container {
    max-width: 1180px;
    margin: 0 auto;
  }
}

大屏不等于所有内容都要拉满。正文阅读区通常需要控制宽度，后台和数据看板则可以更充分利用空间。

图片响应式

响应式页面里，图片通常需要设置最大宽度，避免撑破容器。

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

如果是不同设备加载不同尺寸图片，可以配合 srcset 和 sizes。媒体查询负责布局，响应式图片负责资源尺寸，两者配合效果更好。

导航适配

导航是响应式里最容易出问题的区域。桌面端横向菜单在手机上往往放不下，可以改成折叠菜单、底部导航或更简化的入口。

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

  .mobile-nav {
    display: block;
  }
}

隐藏和显示导航时，要确保键盘和读屏用户也能正常使用。不要只做视觉隐藏，交互状态也要同步处理。

用户偏好媒体查询

媒体查询不只能判断宽度，还可以判断用户偏好，比如深色模式和减少动画。

@media (prefers-color-scheme: dark) {
  body {
    background: #111827;
    color: #f9fafb;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

这些查询能提升体验和无障碍可用性。尤其是动画较多的网站，应该尊重用户的减少动态效果设置。

常见错误

第一种错误是断点太多，样式互相覆盖，后期难以维护。第二种错误是只按设备型号设置断点，而不是按内容布局设置。第三种错误是移动端只缩小字号和间距，没有重新组织布局。

还有一种常见问题是忘记设置 viewport，导致移动端媒体查询表现异常。响应式页面通常需要正确的 viewport 配置，才能按设备宽度渲染。

调试方法

调试响应式页面时，可以使用浏览器开发者工具的设备模式，逐步拖动宽度观察布局在哪些点开始变差。不要只检查几个固定设备尺寸，而要看一段连续宽度区间。

同时要检查真实设备上的触控体验、字体大小、按钮间距和滚动表现。模拟器能发现布局问题，但真实设备更容易暴露操作问题。

实践建议

写媒体查询前，先让页面在最小屏幕上可用，再逐步增强平板和桌面布局。断点跟着内容走，布局撑不住时再加，不要一开始就堆很多断点。

一个稳妥的响应式流程是：移动端单列优先，平板两列增强，桌面控制最大宽度和复杂布局；图片自适应；导航单独处理；最后检查深色模式、减少动画和真实设备体验。这样写出来的页面更稳定，也更容易维护。