Question

在我的Squarespace网站（http://rmcclainmedia.com）上，索引页的第二个上有一张图片。现在是“ Client-logos.png”。在移动平台上很难看到该图像。因此，我想构建某种代码，当某人从桌面程序访问时，我要显示的图像可见，而移动图像的显示则隐藏。对于移动设备，我希望它反之亦然。我了解需要发生的过程，只是不知道编写此代码并将其注入到我的Squarespace页面中的正确方法。

Answer 1

从一般的角度来看，在Squarespace中处理此问题的方法有很多选择：

使用CSS媒体查询可根据浏览器宽度简单地隐藏/显示特定部分或块。
使用CSS媒体查询来隐藏/显示该部分或块，并根据浏览器的宽度相应地显示/隐藏其他部分或块。
使用其他类型的块（例如图库或摘要块），而不是图像块，图像块将根据浏览器的宽度调整其自身布局。

请注意，以下示例中使用的section ID假定您的第一个index section URL slug为“ new-page”，第二个为“ new-page-mobile”。 Squarespace将根据网址段生成ID。这是一个例子。您的可能会有所不同。 CSS应该通过the CSS Editor添加。还要注意，如果显示/隐藏 block 而不是 sections ，则下面的代码将需要更改为使用块ID而不是section ID。

选项1很简单。在您的特定情况下，通过CSS编辑器插入的以下CSS将完成此操作：

@media screen and (max-width:640px) {
  #new-page {
    display: none;
  }
}

选项2当然很相似，除了选项2除了简单地隐藏该部分外，还显示另一个。假设您已经在有问题的第一个索引页面下面创建了一个附加的索引页面部分：

@media screen and (max-width:640.1px) {
  #new-page {
    display: none;
  }
}
@media screen and (min-width:640px) {
  #new-page-mobile {
    display: none;
  }
}

关于选项3，通过使用gallery block grid或summary block grid布局，并分别上传徽标，该布局将在一定程度上进行管理，以更窄的宽度堆叠徽标。

（在旁边：我起初以为您是在谈论“关于”页面上的图片，因为您（主题）不在屏幕上，所以它并不是理想地在移动设备上合成的图片。如果您最终想寻求解决方案，，然后发布一个新问题。）

为移动网站加载一个图像并隐藏另一个，将隐藏的图像加载并隐藏在Squarespace上的移动图像

1 个答案: