如何正常降级CSS视口单位？ [英] How can I gracefully degrade CSS viewport units?

问题描述

CSS视口单元（ vw ， vh ， vmin ， vmax ）很棒，我想开始使用它们的字体 - 但我注意到这里，他们不是广泛支持。我试图google的任何最佳做法在不支持的浏览器的优雅退化，但没有找到任何有用的。除了做类似的事情，有什么更好的方法：

CSS viewport units (vw, vh, vmin, vmax) are great, and I want to start using them for fonts -- but I noticed here that they aren't that widely supported. I tried to google any best practices for graceful degradation in unsupported browsers, but couldn't find anything useful. Are there any better ways beyond doing something like:

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

提前感谢！

推荐答案

• 本机使用



您至少要提供后备广告：

You'll at least want to provide a fallback:

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

还告诉我们使用FitText.js模拟功能。

Also tells about mimicing the functionality with FitText.js.

有关详细信息，请参阅Chris Coyier的视口大小字体 http://css-tricks.com/viewport-sized-typography/

For more information, read Chris Coyier's "Viewport Sized Typography" http://css-tricks.com/viewport-sized-typography/

这篇关于如何正常降级CSS视口单位？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！