响应式不是把 PC 版缩窄，是重新设计一遍

常见错误做法

加了 @media (max-width: 768px)，然后在里面做这些事：

• 字体调小
• 三列变一列
• 隐藏一些「不重要」的模块

这只能叫「塞进小屏幕」，不叫响应式。

真正需要重设计的地方

一、导航不是缩小，是换形态

PC 上是横排的六个菜单项，手机上必须是汉堡菜单。这不是压缩，是更换交互模式。

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed; top: 62px;
    max-height: 0; overflow: hidden;
    transition: max-height .32s;
  }
  .main-nav.open { max-height: 460px; }
}

二、首屏布局要重排，不是等比缩放

PC 上左右分栏（文字 + 头像），手机上如果直接缩成两栏会挤。改成竖向排列，而且用 column-reverse 让头像在上、文字在下。

三、按钮从「并排小」变「并排大」

手机上手指粗，按钮必须够大。PC 上 padding 12px 的按钮，手机上要 14-16px，而且撑满宽度均分。

四、数据网格从 4 列变 2 列

不是变 1 列——4 个数字竖排太长，2×2 是最优解。而且要注意边框：2 列布局要处理第二列不显示右边框，第一行显示下边框。

断点怎么选

不要盲目堆断点。我的经验是三个够用：

• 1024px：小笔记本、横屏平板，微调间距
• 768px：平板竖屏、大手机，切换导航形态
• 480px：小手机，收紧字号和留白

检验方法

写完后用真机看，不要只看浏览器模拟。模拟器里的触摸、滚动惯性、字体渲染都和真机不一样。

响应式的判断标准不是「在小屏幕上能看」，而是「在手机上用起来更顺手」。