如何在小分辨率上更改字体大小

Question

我在图像轮播上有标题，当我调整窗口大小时，我的标题不会改变字体大小。我尝试使用@media查询，但没有工作。

HTML

<div class="item">
    <img src="images/6.jpg" alt="">
    <div class="carousel-caption">
    <h3> Pont Neuf Bridge in Paris</h3>
    </div>
</div>

我试过这个，在这种情况下有没有办法在CSS中设置标题<h5>？ CSS

@media (max-width: 768px) { 
.carousel-caption{
font-size:10px;
}
}

Answer 1

这会更改小屏幕的font-size标记的h5：

@media screen and(max-width:480px){
   h5{ font-size:1.1em; } /* or whatever value */
}

---

在您的示例代码中，您使用的是h3代码，而不是h5 ...所以它有点奇怪

Answer 2

你试过Viewport Width吗？它使字体缩放与浏览器窗口的宽度，因此不需要媒体查询。

More Info

示例：

.carousel-caption h5 {
    font-size: 3vw;
}