无法创建字体大小响应

Question

我正在尝试一个小时，并且我无法在某些列（引导程序）内制作字体大小。这是一个fiddle，显示发生了什么。

有没有什么方法可以让我做出回应？

下面是我使用，使其响应的CSS：

@media only screen and (max-width: 450px) { 
    .digit { 
     font-size: 1em; 
    } 
} 

但它不工作。 ：/

Answer 1

我做了一个插件是：https://github.com/kagagnon/Responsive-Font

一旦你有它，你必须设置查询点在JavaScript：

{ 
    queryPoint : font-size 
} 

例如：

rf('.digit').setQueryPoint({ //rf() = CSS selector. 
    450 : 12, 
    1500 : 40 
}) 

http://jsfiddle.net/Pm2nh/5/

当然，您需要调整满足您需求的价值。

Answer 2

如果您只担心现代浏览器（大多数移动浏览器属于哪个浏览器），则可以使用“视口宽度”（vw）度量。这是视口（设备）宽度的百分比。示例使用3％的视口宽度。调整窗口大小并再次点击运行。

http://jsfiddle.net/KA5qQ/

欲了解更多信息，请查看我们上Chris Coyier's blog post。

<div id="myDiv"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div> 

CSS

#myDiv { 
    font-size: 3vw; 
}