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

Change font size based on container height/width

本文关键字：改变 字体 高度      更新时间：2023-09-26

我想做一个简单的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/

您可以在窗口大小调整事件上添加处理程序，并执行一个新函数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();
});

将您的代码保存在命名为function的地方，例如- changeSize，并将其命名为document.ready和window.resize，如下所示:

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


$(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%;
}
<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 event:

$(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%;
}
<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>

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

由于事件调整大小导致网页上的沉重开销，我建议在这种情况下使用+value instead of parseInt()和caching the DOM elements不要一次又一次地选择它们，就像在这个fiddle: http://jsfiddle.net/8TrTU/1631/

尝试使用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>

这可以使用纯CSS来完成，看看这篇文章:

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

另外，考虑使用em或rem作为font-size，而不是px.

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

相关文章：