BLOG
移动端个人网站排版的几个细节
移动端排版最重要的是不挤、不乱、不让按钮和文字重叠。
移动端个人网站排版，问题往往不在“能不能显示”，而在“好不好用”。桌面端宽屏能容纳复杂布局，到了手机窄屏，标题、按钮、间距的细微偏差都会被放大。与其等上线后收到反馈再修，不如在写代码时就按移动端的约束来设计。
先从视口和文字基准说起
移动端排版的第一道门槛是视口设置。页面头部缺少 <meta name="viewport" content="width=device-width, initial-scale=1"> 时，手机浏览器会按一个虚拟的桌面宽度渲染页面，再整体缩小，导致文字小到看不清、用户需要双击放大才能阅读。这个标签要放在 <head> 里，并且不要漏掉 initial-scale=1，否则部分浏览器在横竖屏切换时会出现缩放比例不一致的问题。
文字大小方面，常见做法是用相对单位。px 是固定值，用户如果在系统设置里调大了默认字号，用 px 定义的文字不会跟着变化，可能造成小字号文字在部分手机上难以辨认。相对单位 em 和 rem 会参考父元素或根元素的字号。用 rem 作为正文和标题的单位，配合根元素字号做基准，能让页面在用户调整系统字号时保持基本可读。需要注意，rem 的基准是 <html> 的 font-size，如果某个组件内部想局部缩放文字，用 em 更合适，因为它参考的是当前元素的父级字号。
标题在窄屏上容易显得过大。桌面端 48px 的标题在手机上可能占掉半屏高度。处理方式不是给每个标题单独写媒体查询，而是给标题字号设定一个范围，让它随视口平滑变化。CSS 的 clamp() 函数可以做到这一点，例如 font-size: clamp(1.5rem, 4vw + 1rem, 2.5rem)，表示字号最小 1.5rem、最大 2.5rem，中间值随视口宽度浮动。这样既避免了标题在手机上溢出，也防止了在大屏上被过度缩小。需要留意的是，clamp() 的中间值如果写得不当，在极端窄屏或超大屏上可能触发边界值，因此写完后要在实际设备或浏览器开发者工具的设备模拟器里拖动视口宽度确认。
按钮和文字换行的处理
按钮换行混乱是移动端常见的视觉瑕疵。桌面端按钮文字短，一行放得下；到了窄屏，按钮宽度被压缩，文字就可能溢出或折行。解决思路有两个方向：一是允许按钮文字在必要时换行，二是缩短文字本身。
允许换行时，要给按钮设置合理的 line-height 和 padding，避免两行文字挤在一起。同时检查按钮是否设置了 white-space: nowrap，这个属性会强制文字不换行，在窄屏下容易导致按钮内容溢出边界。如果按钮是 flex 或 grid 布局中的一项，还要确认它的 min-width 没有被内容撑破——flex 子项默认 min-width: auto，内容再长也会把容器撑开，这时需要设置 min-width: 0 或给按钮一个明确的宽度约束。
缩短文字是更主动的做法。例如“提交订单”在窄屏上可以显示为“提交”，但前提是语义仍然清晰。不要为了省空间把所有按钮都改成图标，移动端用户对不熟悉的图标识别成本很高。如果按钮旁边有辅助说明文字，窄屏下可以考虑隐藏辅助文字、只保留核心操作词。
卡片之间的间距在移动端也要重新审视。桌面端 24px 的间距在手机上可能显得松散，但更常见的问题是间距不一致——有的卡片用 margin，有的用 padding，相邻卡片之间的实际间隔会叠加或抵消。统一使用一种间距方式，并定义一组间距变量（如 --space-sm、--space-md），能减少这类问题。检查时，把浏览器窗口拖到 320px 宽度，逐屏滚动，看卡片之间是否有粘连或间隙过大的位置。
触控目标与交互边界
移动端用手指操作，触控区域大小直接影响使用体验。按钮或链接的可点击区域不宜过小，否则用户反复点不中会感到挫败。判断方法不是看视觉尺寸，而是看实际的可点击范围。如果按钮视觉上只有 24px 高，但周围有留白，可以通过给按钮加 padding 或利用伪元素扩展点击区域。注意不要把两个相邻按钮的点击区域重叠，否则用户会误触相邻操作。
键盘操作在移动端同样存在。表单输入框聚焦时，手机弹出的键盘会遮挡页面下半部分。如果提交按钮在键盘下方，用户输入完可能看不到按钮。处理方式是在表单底部留出足够空间，或者监听输入框的 focus 事件，在必要时把按钮滚动到可视区域。这个行为在 iOS 和 Android 上表现不完全一致，需要在真机上验证，不能只靠模拟器。
代码结构与加载性能
移动端网络环境比桌面端更不稳定，页面加载速度直接影响用户是否愿意等待。图片是个人网站的大头，尤其是摄影或作品集类站点。给 <img> 标签加上 srcset 和 sizes 属性，让浏览器根据屏幕宽度选择合适尺寸的图片，比单纯用 CSS 缩放图片更省流量。同时给图片加上 width 和 height 属性，避免图片加载过程中页面布局跳动——这个跳动在移动端会使用户点错链接。
懒加载适合图片较多的页面，但要注意首屏内容不要懒加载。如果首屏大图用了 loading="lazy"，在某些浏览器里会出现首屏图片延迟加载、页面闪白的问题。判断标准是：用户滚动前需要看到的内容，应该立即加载；滚动后才进入视口的内容，才适合懒加载。
CSS 和 JavaScript 的加载顺序也影响首屏速度。CSS 放在 <head> 中同步加载，避免页面先显示无样式内容；JavaScript 如果不是首屏必需，加上 defer 属性，让它等 HTML 解析完再执行。这样即使脚本加载失败，页面主体内容仍然可读。
容易忽略的检查点
- 在浏览器开发者工具里切换设备模拟器，但不要只看 iPhone 的默认尺寸。把宽度拖到 320px 和 360px 分别检查，这两个宽度覆盖了大多数小屏 Android 设备。
- 横屏状态也要看。手机横过来时视口宽度变大但高度变矮，固定高度的元素可能溢出。
- 检查系统字体设置。把手机系统字号调到最大，再看页面文字是否溢出容器、按钮文字是否被截断。
- 图片加载失败时，
alt文本是否清晰可见，占位区域是否保持了原有尺寸。
修改后的维护习惯
移动端排版问题很少是单次修改就能彻底解决的。每次新增模块或改动布局后，在手机真机上打开页面，滚动一遍，重点看标题、按钮和卡片间距。截图保存下来，和桌面端的截图放在一起对比，能快速发现哪些样式只在特定宽度下生效。
代码结构上，把常用的间距、字号、颜色定义成 CSS 变量，放在文件顶部。后续调整主题时只改变量，不用逐个元素搜索替换。组件样式尽量写在独立的类名下，避免嵌套过深的选择器——嵌套越深，移动端样式覆盖时越容易出问题。
如果页面出现布局异常，先确认是哪个样式规则在起作用。在浏览器开发者工具里选中异常元素，查看计算后的样式，找到来源文件，再决定是修改还是覆盖。不要同时改多个样式再刷新看结果，那样很难定位真正的起因。
评论
登录后可发表评论。