如何在CSS3或javascript中按比例更改窗口的更改大小字體大小

Question

我在做一些web應用程序，並且我有一些與字體大小有關的問題。 如何更改字體大小與CSS3或JavaScript中窗口的更改大小成比例？

Answer 1

你有3個辦法做到這一點：

1. 使用http://fittextjs.com/，但頁面開始要慢一些
2. 使用媒體查詢
3. 使用EMS

現在，這取決於你想成爲你的最終結果。 我會去選項3。

Answer 2

設置你的基本字體大小px在你的頁面設置的字體的其餘部分則到處都是（你定義在CSS中的body元素的）大小相對於一個使用em單位，那麼你可以使用媒體查詢變化只需更改您的基本字體，像這樣所有網頁的字體大小：

body { 
    font-size: 15px; 
} 
@media (max-width: 1000px) { 
    body { font-size: 1.3em; } 
} 
@media (max-width: 500px) { 
    body { font-size: 1.1; } 
} 

Answer 3

要做到這一點，最理想的方式是使用vw單元，它被定義爲1/100的視口寬度的（由此得名）。所以，舉例來說，如果你想你的文字在任何時候都可以在瀏覽器的寬度的4.5％，你可以使用尺寸：

font-size: 4.5vw; 

...和理論上，應該工作。不幸的是，你會發現，它並沒有像預期的那樣工作：WebKit瀏覽器（至少）的字體大小值不是實時更新（儘管它適用於所有其他維度）。您需要觸發重繪爲了使字體大小改變，這可以通過從JavaScript更新z-index屬性來完成：

window.addEventListener('resize', function(){ 
    document.getElementById('myEl').style.zIndex = '1'; 
}, false); 

這可能會產生抖動現象的一點點，但它意味着你不必須在JavaScript中計算任何實際尺寸，並且不需要像媒體查詢那樣使用「階梯」尺寸。

Answer 4

這樣做的理想方法是結合大衆字體大小和@media查詢。理由是：

1）EM本身不會被窗口大小

2）VM重新調整了自己將是太小的分辨率/屏幕低於800像素。

因此，要實現這一目標的正確的方法是：

• 定義一個類 - 道具文本與VM = 1.0所需屏幕寬度
• 添加媒體查詢與您的期望，以適應字體大小較低分辨率的網格。

對於我的響應網格（其設定1/2柱採取下面768px寬度100％的寬度），它看起來像：

<style> 
    .prop-text{font-size:1.0vw} 
    @media (max-width : 768px) { 
    .prop-text{font-size:2.0vw} 
    } 
    /*other media queries here - fit font size to smartphone resolutions */ 
</style> 

<div class="prop-text">your text is here</div>