断点按内容设而不是按设备设
断点的意义是内容开始变得拥挤时换一种排布，所以判断依据应该是内容宽度，而不是市面上有哪些机型。常见做法是三百六十像素、七百六十八像素、一千零二十四像素和一千二百像素附近各设一个，覆盖多数手机、平板和桌面。
断点数量不宜太多。每多一个断点，就多一份需要维护和回归的布局，三到四个通常够用。真正需要精细控制的地方，用弹性布局和最小宽度解决，比再加断点更稳。
判断要不要换布局的标准很直接：在当前宽度下，最重要的信息是否还在一屏的可视范围内。如果关键操作被挤到需要滚动才能看到，就该换排布了。布局调整之后要按真实机型回归，而不只是在浏览器里拖动窗口。系统字体大小、底部安全区域、输入法高度这些变量，在模拟环境里很难完整复现。
触控尺寸与间距
手指的接触面积比鼠标大得多。可点击元素的视觉尺寸可以小，但命中区域建议不小于四十像素见方，小于这个尺寸时误触率会明显上升，尤其是两个相邻按钮。
按钮之间留出足够间距，列表项的点击区域尽量占满整行。行内出现多个可点元素时，比如一行里既有标题又有操作图标，要明确各自的边界，避免用户想点标题却触发了图标。
仅靠图标表达含义时要谨慎，图标在移动端缺少悬停提示，含义不明就只能靠猜。重要操作配文字标签，或者至少保证图标是用户已普遍理解的那几个。
点击区域可以大于视觉尺寸。图标本身画得小巧，命中范围向外扩展几像素，视觉上更轻，操作上却不容易出错。相邻的可点元素之间留出间距，比单纯放大按钮更有效。两个按钮紧挨着时，即使尺寸达标，误触概率依然很高。
底部操作区的处理
移动端拇指的活动范围集中在下半屏，主要操作放在底部比放在顶部更容易触达。常见做法是详情页底部固定一条操作栏，把最关键的动作用主按钮呈现。
底部固定栏要占掉一块可视高度，因此内容区域需要预留下边距，否则最后一行内容会被挡住。这条在长列表和表单里尤其容易漏，检查时滚动到底部就能发现。
同时要避开系统手势区和安全区域。全面屏手机底部有一块手势条，固定操作栏需要向上留出空间，否则按钮会压在系统区域上，点击容易误触到返回桌面。
底部栏的按钮数量也要控制。放三四个同等重要的按钮，等于没有重点，用户仍然要停下来思考。主要动作用实心按钮，其余收进更多菜单。
键盘与滚动的常见坑
输入框获得焦点时键盘会顶起页面，如果不做处理，输入框可能被遮住，用户看不到自己在输入什么。做法是聚焦时把输入框滚动到可视区域中部，而不是顶部。
横向溢出也值得专门检查。一个固定宽度的元素、一张未限制尺寸的图片、一个过长的不换行文本，都会让整页可以左右拖动，在手机上体感很差。逐页检查横向滚动，是移动端回归里性价比最高的一项。
最后，别把桌面端的多列并排硬塞进手机。列表和详情两级结构、折叠面板、横向标签，都是更合适的替代方案。
