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

Question

有没有一种方法可以将文本大小作为浏览器窗口的百分比来设置样式？例如：

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

- Greg

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。

- YMMD

---

哎呀，我觉得这个 Fiddle http://jsfiddle.net/m8VfB/1/ 在 Chrome、Firefox 或 Safari 上都不能用。这可是很多浏览器啊 :/ - dangerChihuahua007

你们有关于这个的支持程度的文件吗？我只是好奇。我找到了一个2011年8月的网站上的一篇文章，似乎表明支持程度并不是很好。 - ScottS

你说得对，现在似乎不起作用了。我在帖子中编辑了一个指向W3规范的链接。当我第一次测试时，它是可以工作的。奇怪！ - YMMD

从我链接的帖子中可以看出，IE是唯一真正支持它的浏览器。当你“工作”时，你是在使用这个浏览器吗？我知道W3的规范，只是不确定实际的实现情况（似乎确实缺乏）。 - ScottS

不，可能是Chrome。还有一个关于Chromium的错误报告，表明它曾经在那里：http://code.google.com/p/chromium/issues/detail?id=124331。 - YMMD

我认为这是正确的答案。虽然现在还不可能，但将来会实现。 - Greg

Answer 2

如果您不介意使用一些JS，http://fittextjs.com/提供了一个很棒的jQuery解决方案。

- Keith

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;
  }
}

等等。您需要确定何时设置“断点”，以及在低端和高端上应该采取多远。

- ScottS