使用vh与vw进行响应式文本的优缺点是什么？

Question

我想我的问题实际上归结为：有许多不同的方式使文本响应，但为什么使用一个而不是另一个？有没有一种方法最适合一般用途，或者不同的技术有不同的用途吗？

Answer 1

如评论中所述，字体大小单位vh和vw将分别相对于视口高度和宽度设置字体大小。

增加/减少this fiddle右下角（输出）窗口中的窗格，看它是否有效。

此处CSS Tricks和W3 Schools

提供更好的信息

更多资料

@media (breakpoints) @ w3schools

meta viewport @ w3schools

meta viewport at css tricks

p:first-child {
  font-size: 4vw
}
p:last-child{
  font-size: 6vh
}

<div class="container">
  <p>This text will expand or contract based on the viewport width.</p>
  <p>This text will expand or contract based on the viewport height.</p>
</div>

Answer 2

您可以使用视口单元和@media标签的组合。点击展开代码段后尝试调整大小。

p {
  font-size: 2vw;
}

<p>
  fawef faw ef afwe awojeif poiaj fojaw oefj aoijf ojia faowjif aojiwfeoja ojfoj owaj fja pfija ijfaowij jva jevsoij iwefjiwap4hwt4awjiajfoi jo ijfaowj oiej poifjaew ofjei
</p>

更多消息来源：

• https://css-tricks.com/viewport-sized-typography/

Answer 3

你不能只使用媒体查询。