WordPress下WooCommerce Storefront主题媒体查询CSS样式不生效求助

架构老林

2026-10-3

问题原因排查与解决方法

1. 修正媒体查询断点优先级问题

Storefront 主题默认以768px作为桌面端的最小宽度断点，你设置的max-width:768px会和桌面端规则重叠，先将断点调整为max-width:767px，同时给选择器添加body前缀提升优先级，避免被主题默认规则覆盖：

/* 无媒体查询的全局规则 */
.custom-logo-link img {
  width: 80%!important;
  margin-bottom: -4em;
}

@media screen and (max-width: 767px) {
  .storefront-primary-navigation {
    clear: both;
    height: 36px !important;
    float: right;
    margin-left: 0!important;
    margin-top: -2em;
  }
  /* 加body前缀提升优先级 */
  body .custom-logo-link img {
    width: 62%!important;
    margin-bottom: -4em;
    display: block;
  }
  body .site-branding {
    margin-bottom: -2.5em;
    width: 32.739%!important;
  }
}

2. 检查基础视口配置

如果移动端样式完全不生效，先确认页面头部存在视口meta标签，没有的话在子主题functions.php中添加：

add_action( 'wp_head', 'add_mobile_viewport', 1 );
function add_mobile_viewport() {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
}

3. 替换PHP插入样式的钩子

你之前使用的storefront_header钩子输出样式的位置早于主题默认CSS加载位置，规则会被覆盖，换成wp_head钩子并设置最高优先级，确保样式最后加载：

add_action('wp_head', 'custom_mobile_branding_css', 999);
function custom_mobile_branding_css() {
?>
<style>
@media only screen and (max-width: 767px) {
  body .site-branding {
    margin-bottom: -2.5em !important;
    width: 32.739% !important;
  }
  body .custom-logo-link img {
    width: 62% !important;
    margin-bottom: -4em !important;
  }
}
</style>
<?php
}