如何优雅地降级CSS视口单元？

Question

CSS视口单元（vw，vh，vmin，vmax）非常棒，我想开始将它们用于字体 - 但我注意到{{ 3}}他们并没有得到广泛的支持。我试图在不受支持的浏览器中谷歌任何最佳实践以优雅降级，但找不到任何有用的东西。除了做以下事情之外还有更好的办法吗？

    h1 {
      font-size: 120%;    /* for unsupported browsers */
      font-size: 5.3vmin; /* for supported browsers */
    }

提前致谢！

Answer 1

• 原生用法

你至少想提供一个后备：

h1 {
  font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
  font-size: 5.4vw;  
}

还讲述了使用FitText.js模仿功能。

欲了解更多信息，请阅读Chris Coyier的“视口尺寸排版”http://css-tricks.com/viewport-sized-typography/

Answer 2

您不能优雅地降低CSS 中的视口单元，因为在旧版本的CSS中，概念上甚至没有任何远程类似的东西。

例如，将字体大小设置为120%根本不能解决问题：它只是将字体大小设置为父元素字体大小的1.2倍，与视口尺寸完全无关。

但是，可以使用客户端JavaScript近似视口单元的效果，以便获取视口属性，然后根据它们设置font-size属性。参见例如回答问题Is there any cross-browser javascript for making vh and vw units work。

Answer 3

根据How to properly use css-values viewport-relative-lengths?，我不认为使用视口单元来限制它们以及@media查询视口的最小高度和宽度是不正确的，即便如此，我认为应该只有当你知道他们将申请的页面非常小（例如商务卡样式页面）时才会使用，否则会使整个视口屏幕空出来。

换句话说，当您说font-size: 5.3vmin时，您究竟在寻找什么？

如果我逐个级联多个窗口，只在每个视口中留下足够的空间以查看三行普通文本，该怎么办？ 5.3vmin的文字很小，难以理解！

同样地，如果我有一个巨大的显示器（比如，Seiki 39" @ 3840x2160，我必须指出，这个显示器在400美元以下是相当实惠的），并且你使用font-size: 5.3vmin用于所有标头这篇文章包含一篇冗长的文章，然后你正在剥夺我的能力和舒适度，以充分享受我的显示器可以支持的所有额外文本行，而不是有5个标题占据屏幕的四分之一以上，而这可能是由一百多行文字。