根據容器大小進行字體縮放

Question

我很難理解字體縮放問題。我目前有一個網站，其正文font-size為100%。 100%但什麼？這似乎是按16像素計算的。我的印像是100%在某種程度上指的是瀏覽器視窗的大小，但顯然不是，因為無論視窗大小調整為行動寬度還是成熟的寬螢幕桌面，它始終是16像素。如何使網站上的文字相對於其容器縮放？我嘗試使用em，但這也無法擴展。我的理由是，當你調整大小時，像我的菜單這樣的東西會被壓扁，所以我需要減少.me

P粉346326040 · Answer

這個問題是由 Alex 在 2507rkt3的回答。

這一事實並不意味著 vw 不能在某種程度上用於確定該容器的大小。現在要看到任何變化，我們必須假設容器在某種程度上是尺寸靈活的。無論是透過直接百分比寬度還是透過100%減去邊距。如果容器總是設定為，比方說，200px 寬，那麼這一點就變得「沒有意義」——然後只需設定適合該寬度的font-size。 p>

範例 1

#但是，對於寬度靈活的容器，必須認識到容器在某種程度上仍然根據視口調整大小。因此，需要根據與視窗的百分比大小差異來調整 vw 設置，這意味著要考慮父包裝器的大小。 看這個範例：

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw;
}

假設這裡div 是body 的子級，它是100% 的50%寬度，在這個基本情況下是視口大小。基本上，您想要設定一個對您來說看起來不錯的 vw 。正如您在上述 CSS 內容中的評論中所看到的，您可以透過數學方式「思考」整個視窗大小，但您不需要這樣做。文字將隨容器“彎曲”，因為容器會隨著視窗大小的調整而彎曲。這是兩個不同大小的容器的範例。

範例 2

#您可以強制基於此進行計算來幫助確保視口大小。 考慮這個範例：

html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       Here, the body is 150% of viewport, but the container is 50%
       of viewport, so both parents factor  into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw;
}

尺寸仍然基於視口，但本質上是基於容器尺寸本身設定的。

容器的大小是否應該動態變化...

如果容器元素的大小最終透過 @media 斷點或JavaScript 動態改變其百分比關係，那麼無論基本「目標」是什麼，都需要重新計算以維持相同的「關係」 " 用於調整文字大小。

以上面的範例#1 為例。如果透過@media 或JavaScript 將div 寬度切換為25% 寬度，則同時font-size 需要在媒體查詢中或透過JavaScript 進行調整，以適應新的計算結果5vw * .25 = 1.25。這將使文字大小與原始 50% 容器的「寬度」從視口大小減少一半時的大小相同，但現在由於更改而減少了它自己的百分比計算。

挑戰

使用 CSS calc() 函數在使用中，動態調整會變得困難，因為該函數目前無法用於 font-size 目的。因此，如果 calc() 上的寬度發生變化，則無法進行純 CSS 調整。當然，對邊距寬度的微小調整可能不足以保證對 font-size 進行任何更改，因此可能並不重要。

P粉957723124 · Answer

容器查詢現在可能是最好的選擇，取決於您的用例，並且所有主要瀏覽器都支援。請在此處查看支援等級：https://caniuse.com/mdn-css_properties_container

現在很容易控制

.module h2 {
  font-size: 1em;
  container-name: sidebar
}

@container sidebar (min-width: 700px) {
  .module h2 {
    font-size: 2em;
  }
}