基于宽度的自动大小字体，没有jquery或javascript

Question

我看到有人能够使用em或％代替px来自动调整字体大小。我尝试了两种方法，但它对我的方案不起作用。

Answer 1

您可以使用vw，这是视口宽度的比率。

＆＃13;

＆＃13;

.text {
  font-size: 5vw; /* 5/100th of the view port width */
}

＆＃13;

<div class="text">I am variable</div>

＆＃13;

＆＃13;

＆＃13;

或者，如果您需要更广泛的浏览器支持，可以使用此插件，但使用JS：FitText

Answer 2

正如@Manoj Kumar所说，你可以使用vw，但它只支持IE9及以上版本，如果你想覆盖更多的浏览器，你也应该使用font-size在em之前使用vw。

.text {
  font-size: 3em; /* Whatever is equivalent to 5vw */
  font-size: 5vw; /* 5/100th of the view port width */
}