javascript - 根据容器高度/宽度更改字体大小

Question

我正在尝试做简单的 jquery 函数:

<div id="container"><span>This is my text</span></div>

js代码:

$(document).ready(function() {
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);
});

CSS 代码:

* {
    font-family:Myriad Pro;
}

#container {
    height:100px;
    width:98%;
    background-color:#eeeeee;
    padding:1%;
}

当我改变调整大小窗口并刷新它时，它会起作用，但我希望它能连续工作，所以当我调整浏览器窗口大小时，字体大小会动态变化。

http://jsfiddle.net/8TrTU/1627/

Answer 1

您可以在窗口调整大小事件上添加一个处理程序并执行一个新函数 update_fontsize 来保存您的字体大小:

var update_fontsize = function(){
    var fontSize = parseInt($("#container").width()/4)+"px";
    $("#container span").css('font-size', fontSize);
};

$(window).resize(function() {
    update_fontsize();
});

$(document).ready(function() {
    update_fontsize();
});