“移动优先”喊了这么多年，真正落实的项目还是少数。很多人嘴上说移动优先，做的时候还是先在电脑上把桌面版设计完，再“缩”到手机上看能不能塞下。这种做法本质上还是桌面优先，移动端只是陪跑。

为什么不该这样？数据很直白：现在大部分网站的流量过半来自手机，用户在通勤、排队、等人、躺着刷手机的场景里打开你的页面。这些场景的共同点是：屏幕小、注意力碎、网络可能不稳、操作只用一根手指。面向这种场景设计，思路得反过来——先做小屏，再向大屏增强。

一、断点规划：375 / 768 / 1024

断点不是拍脑袋定的，要参考主流设备宽度。我们常用三档：375 对应手机（iPhone 标准逻辑像素），768 对应平板竖屏，1024 对应平板横屏和小笔记本。设计稿先做 375，再向上做 768 和 1024，大屏（1280 以上）作为增强。

用 CSS 写断点时，建议用 min-width 由小到大递进，这本身就是“移动优先”的写法——基础样式给小屏，大屏用媒体查询叠加增强：

/* 基础样式：移动端优先，单列布局 */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 平板：768px 起两列 */
@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* 桌面：1024px 起三列 */
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

二、触摸目标最小 44px

桌面端用鼠标点击，光标精确，按钮做小点也能点中。移动端用手指点，指腹接触面大，目标太小就会误触或点空。苹果和谷歌都建议可点击元素的最小命中区不低于 44×44px。

注意是“命中区”，不是“视觉尺寸”。一个图标视觉上只有 20px，但可以用 padding 把可点击区域撑到 44px：

/* 视觉小，命中区够大 */
.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 图标本身 20px，外围 padding 撑大命中区 */
}
.icon-btn svg {
  width: 20px;
  height: 20px;
}

另外相邻可点击元素之间要留间距，避免误触。两个按钮挨在一起，中间至少留 8–12px。

三、移动端字号：正文不小于 16px

iOS Safari 有个机制：正文字号小于 16px 时会自动放大整页缩放，体验很差。所以移动端正文别小于 16px，标题相应放大。一个可用的字阶参考：

/* 移动端字阶参考 */
body { font-size: 16px; line-height: 1.6; }
h1   { font-size: 28px; line-height: 1.3; }
h2   { font-size: 22px; line-height: 1.4; }
h3   { font-size: 18px; line-height: 1.5; }
.small { font-size: 14px; } /* 辅助文字，不用于正文 */

行高在小屏上要稍微放开（1.5 到 1.7），段落之间留出空行，长文阅读才不累。颜色对比也要够，浅灰文字在小屏强光下基本看不清。

四、性能优化：首屏 3 秒内

移动端网络和算力都不如桌面，首屏 3 秒是个及格线，再慢用户就走了。几个立竿见影的做法：图片懒加载（首屏外的图片延迟加载），关键 CSS 内联到 head（避免阻塞渲染），JS 用 defer 或 async（不阻塞 HTML 解析）。

<!-- 关键 CSS 内联，非关键 CSS 异步加载 -->
<style> /* 首屏关键样式写在这里 */ </style>
<link rel="preload" href="css/main.css" as="style" onload="this.rel='stylesheet'">

<!-- 图片懒加载：首屏外的图用 loading="lazy" -->
<img src="hero.jpg" alt="首屏图" width="750" height="400">
<img src="content.jpg" alt="内容图" loading="lazy" width="750" height="400">

<!-- JS 用 defer，不阻塞解析 -->
<script src="js/main.js" defer></script>

图片一定要给 width 和 height 属性，浏览器能提前预留位置，避免加载完跳布局（CLS）。

五、移动交互简化：减少输入

手机上打字是件麻烦事，能不让用户打字就别让他打字。表单能用选择就不用输入，能用键盘类型提示就给提示：

<!-- 数字键盘 -->
<input type="tel" inputmode="numeric" placeholder="手机号">

<!-- 邮箱键盘 -->
<input type="email" inputmode="email" placeholder="邮箱">

<!-- 能选就别打字 -->
<select>
  <option>1 件</option>
  <option>2 件</option>
</select>

交互上多用现成的手势：列表左滑删除、图片双指缩放、卡片长按出菜单。这些是手机用户已经习惯的动作，比加一堆按钮更自然。但手势要有可见的提示，别让用户猜——隐藏的手势等于没有。

写在最后

移动优先的核心不是技术，是心态：默认假设用户在手机上、在碎片时间里、用一根手指打开你的页面。带着这个假设做设计和开发，每一个决策都会更克制、更聚焦。把小屏做好了，大屏只是锦上添花；反过来，大屏做得再漂亮，小屏难用，就丢掉了过半的用户。