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

Posted 2023-03-15

【中文标题】如何优雅地降级 CSS 视口单元？

【英文标题】：How can I gracefully degrade CSS viewport units?

【发布时间】：2014-03-02 21:50:06

【问题描述】：

CSS 视口单元（vw、vh、vmin、vmax）很棒，我想开始将它们用于字体——但我注意到 here 并没有那么广泛支持的。我试图用谷歌搜索在不受支持的浏览器中优雅降级的任何最佳实践，但找不到任何有用的东西。除了做类似的事情之外，还有什么更好的方法：

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

提前致谢！

【参考方案1】：

您不能优雅地降级 CSS 中的视口单元，因为在旧版本的 CSS 中没有任何概念上的相似之处。

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

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

【参考方案2】：

本机用法

你至少要提供一个后备：

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/

【讨论】：

帖子里有代码，external resource是更广泛的解释，我看不出问题。

【参考方案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 个标题占据屏幕的四分之一以上，而这本来可以被一百个额外的文本行。

【讨论】：

关于使用 viewport-relative-lengths 的最佳实践的好评论