在不同屏幕尺寸上調整文本大小的最佳做法

Question

我正在嘗試找出在不同大小的設備上的div中調整文本大小的最佳方法。 在此演示中，我已經多次使用媒體查詢，但這並不是最有效的方法。

有沒有人比這更好的做法？ 顯然，在此演示中，我的解決方案僅適應確切數量的文本，這對於相同大小但包含不同文本量的其他div來說不是很好。

我有興趣聽聽您的想法。

 .first-news-article-description { background: orange; width: 100%; height: 100px; padding: 15px; } @media(max-width:768px) { .first-news-article-description {background:yellow} h2 {font-size: 1.2em} } @media(max-width:600px) { .first-news-article-description {background:red} h2 {font-size: 1.0em} } @media(max-width:450px) { .first-news-article-description {background:blue} h2 {font-size: 0.8em} } @media(max-width:350px) { .first-news-article-description {background:red} h2 {font-size: 0.7em} } 

 <div class="first-news-article-description"> <h2>Some random text that needs to resize properly on different devices</h2> <span>Some more text</span> </div> 

Answer 1

有一個稱為viewport width的單位。 您可以使用它來調整文本大小，而無需使用媒體查詢。 在下面找到示例

 <h1 style="font-size:4vw;">Hello World</h1> <p style="font-size:2vw;">Resize the browser window to see how the font size scales.</p>