页面在桌面上看起来正常,不代表在手机上也好用。适配时可以从内容本身开始,而不只是缩小字号。
先设置合理的内容宽度
主体使用弹性宽度和最大宽度,卡片留出适当内边距。避免固定像素宽度导致横向滚动,也要检查长英文、代码和链接是否会撑破容器。
检查触控和焦点
按钮之间要留出足够间距,键盘焦点应清楚可见。导航折叠后仍应能用键盘访问,关闭菜单后焦点位置也要合理。
验证文字和顺序
长标题要能自然换行,标签过多时允许换行。用窄屏模拟器检查页面顺序、横向滚动条和固定元素是否遮挡内容。
页面在桌面上看起来正常,不代表在手机上也好用。适配时可以从内容本身开始,而不只是缩小字号。
主体使用弹性宽度和最大宽度,卡片留出适当内边距。避免固定像素宽度导致横向滚动,也要检查长英文、代码和链接是否会撑破容器。
按钮之间要留出足够间距,键盘焦点应清楚可见。导航折叠后仍应能用键盘访问,关闭菜单后焦点位置也要合理。
长标题要能自然换行,标签过多时允许换行。用窄屏模拟器检查页面顺序、横向滚动条和固定元素是否遮挡内容。