如果div容器小于XYZ px，则从div容器更改内容

Question

我的网站有点问题。如果设备的屏幕小于xyz px，则幻灯片显示不再起作用。而且我想在那里拍照而不是幻灯片。

我使用的幻灯片是猫头鹰旋转木马 我怎么能这样做？

Answer 1

您可以使用 CSS媒体规则。 CSS3 @media Rule

两个元素（图片和转盘）必须在您的HTML代码中。 如果没有相应的CSS媒体查询，两者都会显示，但如果您提供了正确的规则，可以在每个不同的屏幕尺寸下隐藏/显示所需的元素。

.my_carrousel{ display: block; }
.my_image{ display: none; }

@media screen and (max-width: 480px) {
    .my_carrousel{ display: none; }
    .my_image{ display: block; }
}