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>

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

1 个答案: