使用JQuery调整窗口大小调整CSS字体大小

问题描述：

我的页面布局完全基于EM来保持其灵活性。正文字体大小设置为100％，允许所有内部元素在默认字体大小更改时调整大小。另外我希望字体大小适应窗口大小。我们假设一个20％的窗口会导致120％的字体大小。但无论我放置脚本还是放置jQuery文件，脚本都不会被调用。使用JQuery调整窗口大小调整CSS字体大小

当前版本：

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

    <title></title> 

    <script src="jquery-1.5.2.js"></script> 

    <style type="text/css"> 


body {font-size:100%; font-family:Verdana, Geneva, sans-serif; background:#FFC; margin:auto; left:center; text-align:center; vertical-align:top; width:100%; height:100%; } 

.....all the divs..... 
    </style> 
</head> 
<body> 
....content.... 

<script> 
$(window).one("load resize",function(){ 
    var dfheight = 768;  //size on which the original layout is based 
    var dfwidth = 1024;  
    var winheight = $(window).height(); 
    var winwidth = $(window).width(); 
    var minheight = 600;  //i set min and max values// 
    var minwidth = 800; 
    var maxheight = 1050; 
    var maxwidth = 1400; 
    var heightfactor = (1/defheight)*winheight;  //the % factor by which the default height varies from the current window height// 
    var widthfactor= (1/defwidth)*winheight; 
    var difwidth = abs(winwidth-defwidth); 
    var difheight = abs(winheight-defheight); 
    var newfonthf = (100*heightfactor) + "%"; 
    var newfontwf = (100*widthfactor) + "%"; 
    if ((difheight>difwidth)&&(winheight<maxheight && winheight>minheight)){ 
     $('body').css("font-size",newfonthf); 
    } 
    else if ((difheight<=difwidth) && (winwidth<maxwidth && winwidth>minwidth)){ 
     $("body").css("font-size",newfontwf); 
    } 
    else if ((difheight>=difwidth && winheight>maxheight) || (difheight<=difwidth && winwidth>=maxwidth)){ 
     $("body").css("font-size","137%"); 
    } 
    else if ((difheight>=difwidth && winheight<minheight) || (difheight<=difwidth && winwidth<=minwidth)){ 
     $("body").css("font-size","78%"); 
     } 
    else { $("body").css("font-size","100%"); 
     } 
} 
); 
</script> 

</body> 
</html>

答

这可能是因为你需要有什么之前创建的文档将在该功能的工作。尝试

$(document).ready(function() { 
    $(window).one("load resize",function(){ 
    // rest of your code ... 
    }) 
});

答

有时不在属性将将不起作用

<script src="jquery-1.5.2.js"></script>

应该

<script src="jquery-1.5.2.js" type="text/javascript"></script>

和

<script> $(window).one("load resize",function(){

应该

<script type="text/javascript"> 
$(document).ready(function(){ 
$(window).one("load resize",function(){ 
...//stuff ommited 
});//at the end

使用JQuery调整窗口大小调整CSS字体大小

相关推荐