我的页面布局完全基于 em 以保持灵 active 。 body font-size 设置为 100%，允许所有内部元素在默认 font-size 更改时调整大小。另外我希望字体大小适应窗口大小。假设一个大 20% 的窗口会导致 120% 的主体字体大小。但无论我将脚本或 jQuery 文件放在哪里，都不会调用脚本。
当前版本:
<?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 ...
})
});
关于jquery - 使用 JQuery 在窗口调整大小事件上调整 css body 字体大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5966807/