根据屏幕大小更改幻灯片图像选择-Shopify

Question

我正试图在我的shopify商店上根据屏幕大小显示两个不同的幻灯片。我创建了一个名为部分移动幻灯片的部分，并使用以下代码在检测到移动屏幕大小时显示该部分：

#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

这是完全一样的。就像您在移动设备中删除了电脑版幻灯片放映一样，您可以使用@media only screen and (min-width: 451px)，然后将移动幻灯片放映ID设置为display: none;。

例如

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