如何仅在移动端将网站头部Logo设置为全屏宽度？

桌面端Logo显示正常，但移动端无论调整主题设置都很小，加了CSS代码也没生效，给你几个实用的解决办法：

• 提升CSS选择器优先级：主题自带的样式可能比你写的选择器更具体，所以可以给选择器加上父元素，确保能覆盖原有样式。比如把#logo-container img改成.site-header #logo-container img（具体父类名可以用浏览器F12查看）。
• 取消max-width限制：很多主题会给Logo设置max-width属性，就算你设了width:100%也会被限制，所以要加上max-width: none。
• 直接设置固定宽度：如果用百分比效果不好，直接给Logo设固定宽度比如180px，更直观。

修改后的代码示例：

/* 移动端Logo放大 */
@media only screen and (max-width: 990px) {
  .site-header #logo-container img {
    width: 180px; /* 可根据需求调整数值 */
    height: auto;
    max-width: none;
  }
  /* 如果Logo容器本身有宽度限制，也要放开 */
  #logo-container {
    width: auto;
    max-width: 100%;
  }
}

另外，你可以用浏览器的开发者工具（按F12），选中移动端的Logo元素，查看它当前的样式，看看是哪个属性在限制大小，针对性修改会更准确。

内容的提问来源于stack exchange，提问作者Zay City