Question

我试图做简单的jquery函数：

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

js code：

$(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

你可以在window resize事件上添加一个处理程序，并执行一个保存你的fontsize魔法的新函数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();
});

Answer 2

将您的代码保存在已命名的function中 - changeSize并在document.ready和window.resize中调用，如下所示：

<强> DEMO

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

$(document).ready(function() {
    changeSize();
    $(window).resize(changeSize);
});

或仅在document.ready()中执行一次，如下所示：

$(document).ready(function() {
    $(window).resize(changeSize).trigger('resize');
});

Answer 3

尝试使用jQuery的.resize函数

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

* {
    font-family:Myriad Pro;
}

#container {
    height:100px;
    width:98%;
    background-color:#eeeeee;
    padding:1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"><span>This is my text</span></div>

Answer 4

NestedObject.Id

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

* {
    font-family:Myriad Pro;
}

#container {
    height:100px;
    width:98%;
    background-color:#eeeeee;
    padding:1%;
}

Answer 5

您可以使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container"><span>This is my text</span></div>事件：

$(window).resize

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

* {
    font-family:Myriad Pro;
}

#container {
    height:100px;
    width:98%;
    background-color:#eeeeee;
    padding:1%;
}

Answer 6

ifGtipKontrol.Attributes["src"] = ResolveClientUrl("~/Firma/Tescil/TescilData.aspx") + "?mode=GtipKontrol&NctsN=NctsLoaded_" + GetPageSessionTime();

试试这段代码。

Answer 7

由于事件调整大小导致网页上的开销很大，我建议在这种情况下使用+value instead of parseInt()并caching the DOM elements不要再次选择它们，就像在这个小提琴中一样：{{3} }

Answer 8

这可以使用普通的CSS来完成，看一下这篇文章：

https://css-tricks.com/viewport-sized-typography/

另外，请考虑将em或rem用作font-size与px。

https://j.eremy.net/confused-about-rem-and-em/

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

8 个答案: