WordPress 响应式主题设计：移动优先的 CSS 布局实战

移动设备流量已超过桌面端，响应式设计不再是可选项而是必须项。本文介绍如何在 WordPress 主题中实现移动优先的响应式布局，涵盖 CSS 媒体查询、弹性布局和现代 CSS 技术。

移动优先设计原则

移动优先意味着先为小屏幕设计基础样式，再通过媒体查询为大屏幕添加增强样式。这与传统的"桌面优先"相反，但更符合现代用户行为和 Google 的移动优先索引策略。

视口（Viewport）设置

在主题的 header.php 中添加视口 meta 标签：<meta name="viewport" content="width=device-width, initial-scale=1">。这告诉浏览器使用设备实际宽度渲染页面，而不是模拟桌面宽度。

CSS 媒体查询断点

常用断点设置：/* 移动端基础样式（无媒体查询） */ .container { width: 100%; padding: 0 16px; } /* 平板 */ @media (min-width: 768px) { .container { max-width: 720px; margin: 0 auto; } } /* 桌面 */ @media (min-width: 1024px) { .container { max-width: 1200px; } }

Flexbox 弹性布局

Flexbox 是响应式布局的利器：.nav-menu { display: flex; flex-wrap: wrap; gap: 16px; } @media (max-width: 767px) { .nav-menu { flex-direction: column; } }。使用 flex-wrap 让元素在小屏幕上自动换行。

CSS Grid 网格布局

Grid 适合复杂的二维布局：.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }。auto-fill 和 minmax 组合实现自适应列数，无需媒体查询。

响应式图片

使用 srcset 和 sizes 属性提供不同分辨率的图片：<img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw">。WordPress 的 wp_get_attachment_image() 函数自动生成这些属性。

总结

响应式设计是现代 WordPress 主题的基础要求。移动优先 + Flexbox/Grid + 响应式图片，三者结合能构建出在任何设备上都表现优秀的主题。