如何實現：root {font-size：calc（100vw/40）; }縮放字體大小（S）

Question

按照CSS Values and Units Module Level 3, W3C Candidate Recommendation 8.1 Mathematical Expressions: ‘calc()’：

以下設定「字體尺寸」，使得恰好40EM適合在視口內，確保大致相同的量的文字總是填充屏幕無論是屏幕尺寸。

:root { 
    font-size: calc(100vw/40); 
} 

如果使用'rem'單位指定設計的其餘部分，則整個佈局將縮放以匹配視口寬度。

我想知道如何實現這一點。我假設我需要在某處使用@media來檢測用戶的屏幕大小，然後按照所示設置root，然後使用rem的所有字體大小。有人能給我一個簡單的步驟和/或反饋這是否實際工作嗎？謝謝。

Answer 1

您不需要使用@media來檢測用戶的屏幕大小。 vw/vh的美妙之處在於它們根據視口的大小自動進行調整。在將上述規則添加到樣式表後，只需使用vw/vh/rem進行所有大小測量，即使用戶調整其瀏覽器大小，您的佈局也會縮放。

下面是一個簡單的例子。您可以看到width,height,margin-left和font-size屬性全部獨佔使用rems或視口單元。運行該代碼段，全屏顯示並調整瀏覽器大小，然後您將看到整個佈局（包括h1列和文本）如何隨瀏覽器窗口的寬度而變化（如使用vw在:root CSS規則）。

:root { 
 
    font-size: calc(100vw/40); 
 
} 
 

 
body, h1, h2 { margin: 0; } 
 

 
h1 { 
 
    position: fixed; 
 
    width: 15rem; 
 
    height: 100vh; 
 
    font-size: 4rem; 
 
    background-color: #ccc; 
 
} 
 

 
h2, p { margin-left: 15rem; } 
 

 
h2 { 
 
    font-size: 2.4rem; 
 
    background-color: #ff0; 
 
} 
 

 
p { 
 
    font-size: 1.2rem; 
 
}

<h1>Title</h1> 
 
<h2>Subtitle</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ea sed adversarium 
 
    definitionem, legere malorum laboramus ne cum. Dictas corrumpit vix at, sea 
 
    platonem senserit sapientem ne. At vel laudem audire bonorum. Perfecto posidonium 
 
    eu has, ullum mollis inimicus eos te, sit eu novum atomorum. 
 
<p>Alii libris evertitur in vix, congue ocurreret ut usu, nostro dolores vulputate 
 
    pri ex. Eu eam sint moderatius, eu eos wisi corpora, est sanctus corpora ad. Cu 
 
    nam utamur saperet. Qui id purto quaerendum, ex usu iudico alterum voluptatibus. 
 
<p>Illum mucius praesent id eam, oratio habemus eum ei. Saepe docendi at est, eu mea 
 
    perfecto voluptaria, has admodum recusabo contentiones te. Putant definitionem sea 
 
    ea, viris tantas ad cum. Wisi melius ius ut, est te unum aliquando. Ea quo 
 
    ancillae philosophia.