2026 年，移动端流量已经超过桌面端。响应式设计不再是可选项，而是主题的基本要求。一个好的响应式主题应该在手机、平板、桌面等所有屏幕尺寸上都有良好的显示效果。本文介绍从移动优先到大型屏幕适配的完整实现方案。

移动优先的设计策略

移动优先是响应式设计的核心原则。先为最小的屏幕设计布局，然后逐步增强到更大的屏幕。这种策略让移动端的体验从一开始就被认真对待，而不是作为桌面版的缩小版本。

在实现上，CSS 样式默认针对移动设备编写。然后使用 min-width 媒体查询在屏幕尺寸增大时逐步调整布局。与之相反的是桌面优先策略，使用 max-width 媒体查询逐步缩小，移动体验往往是桌面版的“缩小版”。

媒体查询的断点设置

合理的断点设置可以让主题在不同屏幕尺寸下平滑适配。常见的断点包括小屏手机 320px 到 480px、大屏手机 481px 到 768px、平板 769px 到 1024px、桌面 1025px 到 1440px、以及大屏桌面 1441px 及以上。

断点不是固定的，应该根据内容的自然变化点来设置。当内容在当前屏幕尺寸下显示拥挤或变形时，就是设置断点的地方。

弹性布局与相对单位

使用相对单位可以让布局更加灵活。% 百分比基于父容器宽度，em 基于当前元素的字体大小，rem 基于根元素的字体大小，vw 和 vh 基于视口宽度和高度。

Flexbox 和 CSS Grid 是实现弹性布局的核心工具。Flexbox 适合一维布局，CSS Grid 适合二维布局。组合使用这两种技术，可以创建出复杂的响应式布局。

响应式图片的完整方案

响应式图片不仅仅是使用 max-width: 100%。使用 srcset 属性为不同屏幕宽度提供不同尺寸的图片，使用 sizes 属性告诉浏览器图片在不同视口下的显示宽度，使用 picture 元素根据屏幕条件切换不同格式的图片。

WordPress 的 wp_get_attachment_image 函数已经自动支持 srcset，主题开发者只需要正确使用即可。

导航菜单的移动端适配

导航菜单是响应式设计中最常见的挑战。在移动端，将水平导航折叠为汉堡菜单，点击后展开。在平板和桌面端，显示完整的水平导航栏。实现方式可以是纯 CSS 方案，也可以结合 JavaScript 增强交互。