求助：在Big Cartel中实现电脑与移动端显示不同Logo的CSS代码

操作步骤： #

1. 上传双版本Logo
   登录Big Cartel后台，进入「Design」→「Files」，上传你的方形桌面Logo和窄版移动端Logo。上传完成后点击对应文件，复制它们的访问URL备用。

2. 设置默认桌面Logo
   进入「Design」→「Customize」，将方形桌面Logo设置为站点默认Logo，确保桌面端显示正常。

3. 添加移动端切换CSS
   进入「Design」→「Edit CSS/HTML」，打开CSS编辑器（仅修改CSS区域，不要触碰HTML代码），在现有代码末尾添加以下代码：

/* 移动端Logo切换（适配宽度≤768px的设备） */
@media only screen and (max-width: 768px) {
  /* 隐藏默认的桌面Logo */
  #logo img {
    display: none;
  }
  /* 用移动端Logo替换 */
  #logo {
    background-image: url('[你的移动端LogoURL]');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* 根据你的移动端Logo尺寸调整宽高 */
    width: 180px;
    height: 60px;
  }
}

注意事项： #

• 把代码里的[你的移动端LogoURL]替换成你复制的移动端Logo实际链接
• 根据你的移动端Logo尺寸，调整width和height的数值，保证显示比例正确
• 操作前复制当前全部CSS代码备份，万一出错可以直接粘贴恢复
• 如果你的主题里Logo的选择器不是#logo，可以用浏览器F12开发者工具查看Logo元素的类名/ID，替换代码中的#logo（比如部分主题用.site-logo）

内容的提问来源于stack exchange，提问作者Timothy Sowders