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

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>