如果内容小于 XYZ 像素，则更改 div 容器中的内容

Question

我的网站有点问题。如果设备的屏幕小于 xyz px，幻灯片将不再工作。我想在那里放一张图片而不是幻灯片。

我用的幻灯片是OwlCarousel 我该怎么做？

Answer 1

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

这两个元素（图片和旋转木马）都必须在您的 HTML 代码中。如果没有适当的 CSS 媒体查询，两者都会显示，但如果您提供正确的规则，您可以 hide/display 在每个不同的屏幕尺寸下显示所需的元素。

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

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

如果内容小于 XYZ 像素，则更改 div 容器中的内容

Change Content from div container if it is smaller than XYZ px

html

css

slideshow

responsive