無法創建字體大小響應

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; 
}