我的阅读
0 篇收藏读过的文章会出现在这里。
收藏和记录仅保存在当前浏览器。
公告
欢迎来到祂科技的博客。这里记录前端、AI 与生活，目前文章为原创示例。
最新文章
- 日常网页工具怎么选：图片、计时、购物计算与文件整理生活随想
- 图片去水印与短视频解析：项目选择和本站接入记录前端手记
- 从编解码到开发调试：小站工具箱与开源项目索引前端手记
- AI 协作工作流：从灵感到上线AI 工具
- 文章
- 9
- 分类
- 4
- 标签
- 21
标签
455 字
1 分钟
让响应式布局不只是在缩小
阅读进度0%
输入关键词 本文为原创示例文章，用于本站内容与交互验收。
先决定谁应该先被看见
桌面可以同时展示角色、文章和侧栏；手机却不适合把三者等比例挤进一行。对个人博客而言，站点身份与文章是主线，标签和统计是辅助。移动端可以先放介绍，再给角色一个独立区域，然后进入文章列表。
把角色直接绝对定位到右下角并不足够。文案长度会改变，字体加载会改变尺寸，设备宽度也会改变。布局需要为角色预留空间，而不是希望它恰好没有挡字。
检查实际字号，而不只检查 CSS
rem 会受到根字号影响。桌面看起来足够大的摘要，切到手机后可能因为根字号缩小而难以阅读。可以在组件中设定可读性下限，同时保留随用户字号放大的能力。
.article-summary { font-size: max(0.875rem, 14px); line-height: 1.7;}这里的 14px 是本博客摘要的局部最低值，不是所有正文的通用标准。长篇正文可以更大，并应根据真实设备的阅读体验调整。
验收边界，而不是只看截图
至少检查窄屏、常见手机与平板三个宽度：页面没有横向溢出，角色边界不被裁切，介绍与角色不重叠，折叠菜单的按钮可以用键盘操作。再检查长标题、多行摘要和浏览器放大。
响应式不是让桌面版变小，而是让内容在每种屏幕上都保持合适的优先级。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
让响应式布局不只是在缩小
https://example.com/posts/ta-tech-responsive/ 部分信息可能已经过时
相关文章 智能推荐