需求背景
B2主题本身具备一定的响应式能力，但在实际项目中，移动端经常出现导航挤压、卡片间距异常、触控目标过小等问题。本文基于子主题方式，介绍移动端适配的常用二开手段。
一、响应式断点与容器调整
在子主题 style.css 中通过媒体查询覆盖父主题样式，建议先定义一套统一的断点：
Text
@media (max-width: 768px) {
.main-wrapper { padding: 0 12px !important; }
.b2-sidebar { display: none !important; }
.content-area { width: 100% !important; }
}
@media (max-width: 480px) {
.top-menu-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}二、触控目标与点击反馈
移动端所有可点击元素建议最小高度 44px，并增加 :active 反馈：
Text
a, button, .btn {
min-height: 44px;
display: inline-flex;
align-items: center;
}
a:active, button:active { opacity: .7; transform: scale(.98); }三、图片与懒加载处理
大图建议统一 loading=”lazy”，避免移动端首屏阻塞：
Text
add_filter('the_content', function ($c) {
return preg_replace('/<img(?!.*loading=)/i', '<img loading="lazy"', $c);
}, 20);注意事项
- 覆盖父主题样式时使用 !important 需谨慎，尽量提高选择器优先级。
- 移动端不要禁用缩放，保证可访问性。
- 修改后使用 Chrome 设备模拟逐断点验收。