CSS中的自適應字體大小

本文翻譯自：Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. 我已經使用Zurb Foundation 3網格創建了一個站點。 Each page has a large h1 : 每個頁面都有一個很大的h1 ：

 body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em; font-weight: 500; } 

 <div class="row"> <div class="twelve columns text-center"> <h1> LARGE HEADER TAGLINE </h1> </div> <!-- End Tagline --> </div> <!-- End Row --> 

When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for the large text. 當我將瀏覽器調整爲移動大小時，大字體不會調整，並導致瀏覽器包含水平滾動條以適應大文本。

I've noticed that on the Zurb Foundation 3 Typography example page , the headers adapt to the browser as it is compressed and expanded. 我注意到在Zurb Foundation 3 Typography 示例頁面上 ，標題在壓縮和擴展時適應瀏覽器。

Am I missing something really obvious? 我是否真的缺少明顯的東西？ How do I achieve this? 我該如何實現？

---

#1樓

參考：https://stackoom.com/question/13f5A/CSS中的自適應字體大小

---

#2樓

The font-size won't respond like this when resizing the browser window. 調整瀏覽器窗口大小時， font-size不會像這樣響應。 Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser. 相反，它們會響應瀏覽器的縮放/類型大小設置，例如，當您在瀏覽器中同時按下鍵盤上的Ctrl和+時。

Media Queries 媒體查詢

You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars. 您將不得不考慮使用媒體查詢來按一定的間隔減小字體大小，從而開始破壞設計並創建滾動條。

For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking: 例如，嘗試將其添加到底部的CSS內，在設計開始中斷的任何地方更改320像素的寬度：

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Viewport percentage lengths 視口百分比長度

You can also use viewport percentage lengths such as vw , vh , vmin and vmax . 您還可以使用視口百分比長度，例如vw ， vh ， vmin和vmax 。 The official W3C document for this states: W3C的官方文檔指出：

The viewport-percentage lengths are relative to the size of the initial containing block. 視口百分比長度相對於初始包含塊的大小。 When the height or width of the initial containing block is changed, they are scaled accordingly. 更改初始包含塊的高度或寬度時，將對其進行相應縮放。

Again, from the same W3C document each individual unit can be defined as below: 同樣，可以從同一W3C文檔中定義每個單獨的單元，如下所示：

vw unit - Equal to 1% of the width of the initial containing block. vw單位-等於初始包含塊的寬度的1％。

vh unit - Equal to 1% of the height of the initial containing block. vh單位-等於初始包含塊的高度的1％。

vmin unit - Equal to the smaller of vw or vh. vmin單位-等於vw或vh中的較小者。

vmax unit - Equal to the larger of vw or vh. vmax單位-等於vw或vh中的較大者。

And they are used in exactly the same way as any other CSS value: 它們的使用方式與任何其他CSS值完全相同：

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Compatibility is relatively good as can be seen here . 兼容性是比較好的可以看出這裏 。 However, some versions of Internet Explorer and Edge don't support vmax. 但是，某些版本的Internet Explorer和Edge不支持vmax。 Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8. 此外，iOS 6和7的vh單元存在問題，已在iOS 8中修復。

---

#3樓

Use CSS media specifiers (that's what they [zurb] use) for responsive styling: 使用CSS media說明符（即[zurb]所使用的）進行響應式樣式：

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

---

#4樓

If you don't mind to use a jQuery solution you can try TextFill plugin 如果您不介意使用jQuery解決方案，則可以嘗試使用TextFill插件

jQuery TextFill resizes text to fit into a container and makes font size as big as possible. jQuery TextFill調整文本大小以適合容器，並使字體大小盡可能大。

https://github.com/jquery-textfill/jquery-textfill https://github.com/jquery-textfill/jquery-textfill

---

#5樓

You can use the viewport value instead of ems, pxs, or pts: 您可以使用視口值代替ems，pxs或pts：

1vw = 1% of viewport width 1vw =視口寬度的1％

1vh = 1% of viewport height 1vh =視口高度的1％

1vmin = 1vw or 1vh, whichever is smaller 1vmin = 1vw或1vh，以較小者爲準

1vmax = 1vw or 1vh, whichever is larger 1vmax = 1vw或1vh，以較大者爲準

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

From CSS-Tricks: Viewport Sized Typography 從CSS技巧： 視口大小的版式

---

#6樓

jQuery's "FitText" is probably the best responsive header solution. jQuery的“ FitText”可能是最佳的響應頭解決方案。 Check it out at GitHub: https://github.com/davatron5000/FitText.js 在GitHub上檢查一下： https : //github.com/davatron5000/FitText.js