用@media做适配：从痛点到可落地的响应式方案

响应式不是一场大促的布景，而是一天二十四小时都能用到的页面习惯。从手机通勤到平板办公，再到桌面处理长文档，不同的使用场景对字体、列数、间距和交互都会有不一样的期待。用@media把关键样式条件化，能让你的页面更懂用户当下所处的环境。

从“通用样式”走向“条件样式”

别再把一切放进通用样式表，让@media把条件带入层叠。以视口宽度为起点，逐步细化到设备方向、分辨率与像素比，构建可复用的断点策略。

/* 基础重置与字体 */
:root {
  --base-font: system-ui, sans-serif;
  --base-size: 16px;
}

@media (min-width: 600px) {
  body {
    font-size: 18px;
  }
  article {
    column-count: 2;
    column-gap: 2rem;
  }
}

可落地的思路： 优先在媒体查询里定义关键断点，并把与断点相关的样式合并，减少全局污染。当断点移动时，只调整与布局相关的属性，避免样式表臃肿。

交互细节：悬停、焦点与可访问性

触控屏上“悬停”已不常用，但交互的反馈与可访问性不能忽视。通过:focus、:active与过渡的时长、宽度等，让页面在不同输入方式下都有明确反馈。

button:hover {
  background-color: #f0f0f0;
  transform: scale(1.02);
}

button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);
}

注意： 触控设备上，尽量避免只依赖:hover，改用:active、:focus或@supports使用pointer-events的判定，提升可访问性。

断点之外：方向与像素比

除了宽度，方向与像素比同样能带来重要的体验差异。按需启用横向布局或单列阅读，微缩距屏上的2:1或1:1像素比也会让细节清晰度大不相同。

@media (orientation: landscape) {
  nav {
    flex-direction: row;
  }
}

@media (min-aspect-ratio: 2/1) {
  figure {
    width: 40vw;
    aspect-ratio: 2 / 1;
  }
}

实战：从“能用”到“好用”

聚焦一个具体场景：在手机端只展示关键信息，用单列布局和加大字号提升可读性；在平板端允许并排阅读，适当减少间距以留出呼吸感；在桌面端支持多列与可折叠导航。

@media (min-width: 600px) {
  body {
    column-count: 2;
    column-gap: 1.5rem;
  }
  nav {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (min-width: 1024px) {
  body {
    column-count: 3;
    column-gap: 2rem;
  }
  nav {
    flex-direction: row;
  }
}

优化与测试

发布前用浏览器开发者工具的Device Mode全模拟常用设备与网络环境，关注渲染性能与样式切换的平滑度。对每个断点，检查是否有不必要的重排或重绘，优先把动画与布局相关的属性放到@media中以减少全局抖动。

结语

@media不只是技术点，是把页面与用户场景连接起来的桥梁。用条件样式做细致的适配，能减少用户操作成本，提升体验连贯性。从关键断点到交互反馈，把适配做在细节里，才是响应式真正的价值。