3

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

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

提前致谢！

4

3 回答 3

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/

于 2014-02-06T06:42:04.693 回答
0

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

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

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

于 2014-02-06T05:53:58.353 回答
0

根据如何正确使用 css-values viewport-relative-lengths？, 我认为使用视口单位之外的视口单位是不正确@media的非常小（例如名片样式的页面），否则会使整个视口屏幕空手而归。

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

如果我一个接一个级联多个窗口，只在每个视口中留出足够的空间来查看三行普通文本怎么办？文字5.3vmin随意小到难以理解！

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

于 2015-05-12T02:51:00.390 回答