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

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>