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

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 或更小。