响应式网页设计的基本实践

到了 2013 年，很多网站已经不能再只盯着桌面浏览器了。手机和平板访问越来越多，页面如果还是固定宽度、固定结构，用户体验会立刻掉下来。

响应式设计真正解决的是什么

不是“同一个页面缩小了也能看”，而是页面要根据设备宽度重新安排结构、内容和交互。

最基础的一步通常就是媒体查询：

@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

除了媒体查询，移动端页面当时还有两个很重要的习惯：

• 先把主要内容区做成流式宽度
• 尽早加上 viewport 配置

如果页面宽度仍然完全按桌面端思维去写，就算加了断点，也很容易只是“缩小版网页”，而不是适配过的移动页面。

响应式不只是改宽度

真正的响应式设计，很多时候还包括：

• 导航从横排改成折叠
• 图片随容器缩放
• 一些辅助信息在窄屏下隐藏

也就是说，它不是单一的 CSS 技巧，而是页面信息层级在不同设备上的重排方式。

为什么这种思路后来越来越重要

因为设备差异一旦变大，页面就不能只靠“缩放一下”来解决问题。手机用户和桌面用户看到的可视区域、操作方式、注意力重点都不一样，真正合理的页面，应该是在不同终端下把最重要的信息优先给出来，而不是死守一种桌面布局。

这也是为什么后来很多前端团队会把响应式设计当成默认前提，而不是额外附加能力。它要求的不只是 CSS 会写媒体查询，更是你是否愿意重新思考页面结构在不同设备上的主次关系。

小结

响应式设计在 2013 年开始变成一种现实需求，而不是单纯的新概念。前端开发也从这里开始真正进入多终端适配阶段。

而从更长的时间线看，响应式设计真正留下来的价值，是它逼着前端开发者把“屏幕只是一个容器”这件事想明白。终端会变、尺寸会变、交互方式会变，但信息层级和布局意图必须自己主动去设计。这也是它后来会变成前端基本能力的重要原因。