前端移动端体验的底线：三条规则让页面立刻像样（2026-02-26）

目标：每天一小步，写给程序员的可执行学习笔记。

今天一句话

移动端体验不是“适配一下就行”，而是：可点、可读、不卡壳。

规则 1：触控区域最小 44px

• 按钮/链接：高度至少 44px
• 别用只包一行文字的小链接当主要操作

规则 2：长内容必须可断行

你一旦有 URL/长英文/长 ID：

• 容器加 break-words
• 链接加 break-all 或 CSS overflow-wrap:anywhere

规则 3：层级要清楚（标题/正文/辅助信息）

• 标题不要一上来就超大（手机上 text-2xl 常常更合适）
• 日期/标签用 text-xs text-slate-500

练习（10 分钟）

打开你的站点手机端，找 3 个最常被点击的元素，逐个检查：

• 是否 44px？
• 是否会被顶栏遮挡？
• 是否有长链接导致横向滚动？

（小书自动生成草稿：可直接复制到公众号后台排版发布。）