Responsive Design

Definition / 定义

“响应式设计”：一种网页/界面设计方法，使页面能根据不同设备与屏幕尺寸（如手机、平板、桌面）自动调整布局、字体与图片等，从而获得良好阅读与操作体验。（在网页语境中尤指“响应式网页设计”。）

Pronunciation / 发音

/ rɪˈspɒn.sɪv dɪˈzaɪn /（也常见美式：/ rɪˈspɑːn.sɪv dɪˈzaɪn /）

Examples / 例句

Responsive design makes the website look good on phones and laptops.
响应式设计让这个网站在手机和笔记本上都好看。

By using responsive design, we can maintain one codebase while optimizing the layout for different screen sizes and orientations.
通过响应式设计，我们可以维护同一套代码，同时针对不同屏幕尺寸与横竖屏优化布局。

Etymology / 词源

responsive 来自 response（“回应、反应”），表示“能对变化做出反应的”；design 源自拉丁语 designare（“标记、规划、设计”）。合在一起强调“设计会对设备/环境变化作出响应”。该术语在网页领域因 Ethan Marcotte 于 2010 年提出并推广而广为流行。

Related Words / 相关词

• Adaptive
• Mobile-First
• Breakpoint
• Media Query
• Fluid Grid
• Flexible Images
• Viewport
• Progressive Enhancement

Literary Works / 文学作品

• Responsive Web Design（Ethan Marcotte）——提出并系统阐述“响应式网页设计”的经典著作。
• Learning Responsive Web Design（Clarissa Peterson）——以实践为导向讲解响应式布局与常见模式。
• HTML and CSS: Design and Build Websites（Jon Duckett）——面向入门者，涉及响应式思路与相关前端基础。
• Don’t Make Me Think, Revisited（Steve Krug）——可用性经典书籍，在现代网站语境中常讨论到移动端与响应式体验。