html - 有没有办法使用 CSS 将文本大小设置为窗口大小的百分比？

Question

有没有办法将文本大小设置为浏览器窗口的百分比？例如：

h1
{
    height: 15%;
    /* in my ideal world this would be 15% of the window 
       (or parent) size rather than inherited font-size */
}

Answer 1

在 CSS3 中：

h1{
   font-size: 15vw; // relative to the viewport's width
   font-size: 15vh; // relative to the viewport's height
   font-size: 15vm; // relative to the ratio width/height of the viewport
}

但当然，这并不适用于所有浏览器。

请看这里：http ://www.w3.org/TR/css3-values/#viewport-relative-lengths

Answer 2

如果你不介意一点 js ，在http://fittextjs.com/有一个很棒的 jquery 解决方案

Answer 3

这并不完美，但使用媒体查询可能会很接近。

@media screen and (max-height: 50px) {
  body {
    font-size: 7.5px;
  }
}

@media screen and (max-height: 100px) {
  body {
    font-size: 15px;
  }
}

@media screen and (max-height: 150px) {
  body {
    font-size: 22.5px;
  }
}

@media screen and (max-height: 200px) {
  body {
    font-size: 30px;
  }
}

等等。您必须确定何时建立“突破”点以及在低端和高端采取多远。