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

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;
    }
}

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