根据屏幕尺寸更改幻灯片图像选择 - Shopify

Question

我正在尝试根据我的 shopify 商店的屏幕尺寸显示两个不同的幻灯片。我创建了一个名为 section-mobile-slideshow 的部分，并使用以下代码在检测到移动屏幕尺寸时显示此部分：

     #shopify-section-mobile-slideshow {
      display: none !important;
    }
  @media (max-width: 450px){ 
    #shopify-section-slideshow {
      display: none !important;
    }
    #shopify-section-mobile-slideshow {
      display: block !important;
    }
  }

这在手机上效果很好，但在我的笔记本电脑上我可以看到两个幻灯片。当屏幕尺寸超过一定数量的像素时，如何隐藏移动幻灯片？

Answer 1

完全一样。正如您在移动设备中删除 PC 版本的幻灯片一样，您可以使用 @media only screen and (min-width: 451px)，然后将移动幻灯片 ID 设置为 display: none;。

例如

@media only screen and (min-width: 451px)
{
    #shopify-section-mobile-slideshow
    {
        display: none;
    }
}