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

我在圖像傳送帶上有標題，當我調整窗口的大小時，我的標題不會更改字體大小。我試着用@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; 
} 
}

來源

2015-03-02 RS92

媒體裏面查詢，你能更具體：'.carousel字幕H5 {//規則}'應該做的伎倆。 – lwalden 2015-03-02 16:19:09

你試過Viewport Width？它使得字體比例與瀏覽器窗口的寬度一致，因此不需要媒體查詢。

More Info

例子：在CSS

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

來源

2015-03-02 16:22:19

我認爲常見的概念是爲了避免這種情況，因爲它在某些瀏覽器上沒有被正確支持，媒體查詢仍然是我擔心的最好方式。 – 2015-03-02 16:27:27

@Jackhardcastle我假設你沒有點擊我答案中的第一個鏈接呢？我在我所有主流瀏覽器的網站上都能正常工作 – 2015-03-02 16:29:02

我以前去過那個網站，注意到支持只是IE瀏覽器的一部分，而部分它意味着部分（測試它），看看它是如何響應的是。 IE佔全球瀏覽器使用量的10％，因此對它進行解釋很重要，即使這看起來像一個低數字。 – 2015-03-02 16:30:22

這將改變h5標籤的font-size爲小屏幕：

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

在您使用的是h3標籤，而不是你的h5示例代碼...所以這有點怪怪的

來源

2015-03-02 16:18:24 vsync

不工作，我試着用h3。我解決了與視口，在任何情況下，謝謝 – RS92 2015-03-02 16:28:00

這是不可能的，它不工作。你錯了我的朋友。我向你提供了你所要求的。如果它不起作用，那肯定是你做錯了。請向我們展示代碼，或者創建一個測試頁面。被接受的答案的解決方案可能會在您的小屏幕設計（例如移動設備）中造成嚴重破壞。 – vsync 2015-03-02 16:45:11

我在這裏發佈了我的完整代碼http://jsfiddle.net/8r7Lbbsr/，但它不是一樣的樣子，因爲圖片沒有導入，我覺得jsfiddle上沒有引導類。 – RS92 2015-03-02 21:05:25

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

回答

相關問題