Squarespace网站实现桌面与移动端图片互斥显示技术求助

嘿，我明白你要搞定的问题——桌面端的logo图在移动端太小看不清，想要分设备显示不同图片对吧？这事儿用CSS媒体查询就能轻松解决，我一步步给你捋清楚：

第一步：准备两张适配不同设备的图片 #

• 先把你的桌面端logo图（Client-logos.png）和专门制作的移动端适配logo图（比如命名为Client-logos-mobile.png）上传到Squarespace的媒体库，上传后分别复制它们的完整图片URL存好备用。
• 回到首页编辑器，找到第二个位置的图片区域：
  1. 添加一个新的图片块，把移动端logo图放进去，点击图片块的设置图标，找到「高级」选项，在「CSS类」输入框里填mobile-logo。
  2. 原来的桌面端logo图片块，同样在「CSS类」里填desktop-logo。

第二步：编写CSS实现设备切换逻辑 #

接下来写一段CSS代码，让桌面端只显示桌面logo，移动端只显示移动端logo：

/* 默认状态：显示桌面logo，隐藏移动端logo */
.mobile-logo {
  display: none !important;
}

.desktop-logo {
  display: block !important;
}

/* 移动端断点（Squarespace常用767px作为移动端分界） */
@media screen and (max-width: 767px) {
  .mobile-logo {
    display: block !important;
  }
  .desktop-logo {
    display: none !important;
  }
}

第三步：把代码注入到Squarespace页面 #

有两种注入方式，选适合你的：

• 全局注入（整个网站生效）：
  1. 进入网站后台，点击「设置」→「高级」→「代码注入」
  2. 在「页眉」输入框里粘贴代码，记得把CSS包裹在<style>标签里，也就是：

     <style>
     /* 这里放上面的CSS代码 */
     </style>
     

• 仅首页生效：
  1. 打开首页编辑器，点击页面右上角的「设置」图标
  2. 选择「高级」选项卡，在「页面头部代码注入」里粘贴包裹好<style>的CSS代码即可。

小提示 #

• 如果你觉得767px的断点不合适，可以自己调整max-width的值，比如改成640px，看哪种适配效果更贴合你的需求。
• 一定要保证图片块的CSS类名和代码里的完全一致，别打错字哦！

内容的提问来源于stack exchange，提问作者R. McClain