更改字体大小/宽度

问题描述：

<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/

使用$（窗口）.resize（）funtion – Omidam81

不会是更容易在你的CSS只是使用PX的REM呢？ – Shilly

答

你可以在窗口上添加一个处理调整大小事件，并执行新的功能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(); 
});

如果你需要一个快速轻量级的实现而不需要一个完整的插件，那就可以工作。 – Doidgey

答

尝试使用jQuery

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>

的 .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事件：

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

试试这个代码。

答

保持你的代码在一个名为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'); 
});

答

由于事件调整大小结果在网页上的沉重的开销，我会建议使用在这种情况下+value instead of parseInt()和caching the DOM elements不要在这个小提琴连连喜欢选择它们：http://jsfiddle.net/8TrTU/1631/

答

这可以使用普通的CSS来实现，看看这篇文章：

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

而且，考虑使用EM或REM的字体大小与像素。

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

更改字体大小/宽度

相关推荐