响应式与断点
Marcotte（2010）以流式网格、弹性图片与媒体查询提出响应式设计。不同屏幕下阅读方式不同（Chae & Kim, 2004; Kim et al., 2015），仅靠拉伸不够。
按内容而非设备
在内容开始破版处设断点。按Wroblewski（2011）以小屏为基础、用min-width扩展，有助于移动优先设计与核心网页指标（Mozilla, n.d.）。
容器查询与测试
组件复用问题（Nebeling & Norrie, 2013）可用容器查询解决。确认视觉层级保持不变，并测试横屏、放大字体与折叠屏。
常见问题
- 几个断点合适？
- 按内容通常2到4个。
- 用min-width还是max-width？
- 移动优先的min-width更易维护。
来源核查日期：2026-10-27
参考文献
- Marcotte, E. (2010, May 25). Responsive web design. A List Apart. 以流式网格与媒体查询定义响应式设计的文章。
- Marcotte, E. (2011). Responsive web design. A Book Apart. 系统阐述响应式方法的书。
- Wroblewski, L. (2011). Mobile first. A Book Apart. 支撑min-width断点顺序的移动优先策略。
- Mozilla. (n.d.). Using media queries. MDN Web Docs. 媒体查询语法技术文档。
- Nebeling, M., & Norrie, M. C. (2013). Responsive design and development: Methods, technologies and current issues. In Web Engineering: ICWE 2013 (pp. 510–513). Springer. 总结响应式开发方法与问题。
- Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. 阅读行为随屏幕尺寸而变。
- Chae, M., & Kim, J. (2004). Do size and structure matter to mobile users? An empirical study of the effects of screen size, information structure, and task complexity on user activities with standard web phones. Behaviour & Information Technology, 23(3), 165–181. 小屏需要更简单的结构。