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

Question

我做了一些網絡應用程序，但我對font-size有一些問題。 如何在 CSS3 或 javascript 中與窗口的更改大小成比例地更改字體大小？

Answer 1

這樣做的理想方法是使用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 2

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

1) em 本身不會按窗口大小重新縮放

2) 對於低於 800px 的分辨率/屏幕，vm 本身會太小。

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

• 為您所需的屏幕寬度定義一個類 - 帶有 VM=1.0 的 prop-text
• 添加媒體查詢以適合您所需的較低分辨率網格的字體大小。

對於我的響應式網格（將 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>

Answer 3

在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 4

你有 3 種方法來做到這一點：

1. 使用http://fittextjs.com/ ，但頁面可能開始變慢
2. 使用媒體查詢
3. 使用 em

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

Answer 5

我認為最好的方法可能是vh ，因為字體大小會改變文本的高度。 使用vh意味着即使用戶調整頁面大小或屏幕很小，文本也將始終愚弄頁面的大小。