用瀏覽器窗口更改CSS字體大小

Question

這是可能的CSS或JavaScript？所以，如果我想在特定瀏覽器大小的情況下使用20pt字體或1em字體或類似字體，但如果瀏覽器窗口縮小或展開，字體會縮小並展開？謝謝

Answer 1

您可以使用onResize事件來做到這一點。可以利用jQuery來做到這一點，例如：http://api.jquery.com/resize/。您只需要對特定元素應用適當的CSS更改。

Answer 2

有沒有適當的CSS解決方案，我知道。您可以用％定義字體大小，但會佔用父元素字體的像素的百分比。

你可以使用媒體查詢，但他們會變得更大，步驟不流利。

.p { 
    font-size: 20px; 
}  
@media screen and (max-width: 600px) { 
    .p { 
    font-size: 12px; 
    } 
} 
@media screen and (max-width: 800px) { 
    .p { 
    font-size: 14px; 
    } 
} 
@media screen and (max-width: 1000px) { 
    .p { 
    font-size: 16px; 
    } 
} 
@media screen and (max-width: 1200px) { 
    .p { 
    font-size: 18px; 
    } 
} 

Answer 3

這是一個解決方案，不依賴於CSS3或Javascript的（非廣泛支持的部分）工作。它使用媒體查詢來改變字體大小，但由於採用SASS它是簡明扼要的表述，它非常容易使用：

http://github.com/wadim/responsive-font-size

有四個參數提供該混入會智能地找出正確的媒體查詢爲你定義。