我正在尝试找出在不同大小的设备上调整 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>
最佳答案
有一个单位叫做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>
关于html - 在不同屏幕尺寸上调整文本大小的最佳做法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50445015/