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

來源

2011-05-11 Jennifer

這可能是因爲你需要有什麼之前創建的文檔將在該功能的工作。嘗試

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

來源

2011-05-11 15:36:47 Cfreak

有時不在屬性將將不起作用

<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

來源

2011-05-11 16:05:10

使用JQuery調整窗口大小調整CSS字體大小

回答

相關問題