移动设备的CSS字体大小

Question

我已经完成了简单的页面，似乎对不同大小的屏幕反应良好。我没有做任何想要实现这一点的事情 - 只是避免固定尺寸等。

但是，一个页面有一个大字体的单个单词：

当我调整浏览器大小时，所有其他内容都会正确显示，但标题词当然不会中断：

处理此问题的正确方法是什么？有没有办法根据屏幕宽度调整字体大小？

Answer 1

另一种选择是使用viewport-percentage lengths。

  

vw单位：等于初始包含块宽度的1％。

您可以在CSS Tricks上阅读更多相关内容，其中讨论了某些浏览器的重绘错误，但您可以使用一些jQuery修复它。

http://jsfiddle.net/7L9QH/

CSS

h1 {
    font-size: 25vw;
}

Answer 2

您可以使用以下媒体查询：

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
   body {
    background: #ccc;
  }
}

可在此处找到更多信息：http://css-tricks.com/css-media-queries/

Answer 3

您是否尝试过FitText？

这是一个为这种场合制作的jQuery插件。引用他们的描述：

  

FitText使字体大小变得灵活。在流体或响应式布局上使用此插件，以实现填充父元素宽度的可缩放标题。