当页面最小化时，如何使幻灯片显示响应并消失？

Question

我正在开发一个从头开始编码的网站。

我正在使用以下内容帮助我在我的旋转木马幻灯片上插入标题，这些幻灯片效果非常好： Adding text over an image in Bootstrap carousel

一切都很敏感。唯一的问题是，当我将页面最小化到移动尺寸时，标题会出现在幻灯片的顶部。一旦页面达到一定的大小，有没有办法让它们消失？

谢谢！

Answer 1

您可以使用css media query。 只需在css文件中添加样式规则，例如：

@media only screen and (max-width: 500px) {
    .caption {
        display: hidden;
    }
}

对于最大宽度，您当然可以使用您喜欢的任何像素值。媒体查询中的所有样式仅在满足条件时应用，因此在这种情况下，如果屏幕宽度为500px或更小。