如何在小分辨率下更改字體大小

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

這將為小屏幕更改h5標簽的font-size ：

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

---

在示例代碼中，您使用的是h3標簽，而不是h5 ...，所以有點奇怪

Answer 2

您是否嘗試過視口寬度 ？ 它使字體縮放與瀏覽器窗口的寬度一致，因此不需要媒體查詢。

更多信息

例：

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