我对 javascript 还很陌生，但我正在尝试学习。
我有一个图像，图像上有一个 div 容器。 div 容器包含 2 个内部 div，用于标题和一些文本。标题的字体比正文大。
我用来工作和开发的屏幕宽度是768。
我想让javascript根据浏览器窗口的比例更改加载时的字体大小和调整大小...所以如果浏览器窗口大30%...字体应该比CSS中定义的大30%。 ..这是我制作的代码..但它不起作用。
<head>
<style type="text/css">
#container{
position: absolute;
top:10%;
left: 10%;
background-color:#F30;
}
#boxtitle{
font-size:3em;
}
#boxtxt{
font-size:0.9em;
}
</style>
<script>
onresize=onload=function()
{
var innerW = window.innerWidth;
var boxtitle = document.getElementById("boxtitle").style.fontSize;
var boxtxt = document.getElementById("boxtxt").style.fontSize;
var ratio = innerW / 768;
boxtitle = boxtitle * ratio;
boxtxt = boxtxt * ratio;
}
</script>
</head>
<body>
<img src="main_pic3.jpg" width="100%" />
<div id="container">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="boxtitle">TITLE</div></td>
</tr>
<tr>
<td><div id="boxtxt">TXT</div></td>
</tr>
</table>
</div>
</body>
您正在将变量的 value 设置为字体大小（您没有存储对 DOM 元素的引用。）此外，尝试使用
parseInt尝试：
var innerW = parseInt(window.innerWidth),
boxtxt = parseInt(document.getElementById("boxtxt").style.fontSize),
ratio = innerW / 768;
document.getElementById("boxtxt").style.fontSize = (boxtxt * ratio) + 'px'; //etc.
需要注意的一件事（我没有在其他浏览器中测试过）是，在 Mac 版 Firefox 中，
style.fontSize
function getStyle(object,prop) {
if(getComputedStyle) {
return getComputedStyle(object)[prop];
} else if (object.currentStyle) {
return object.currentStyle[prop]; //IE
}
}
//implement it
getStyle(document.getElementById('someElement'),'fontSize'); //for example, outputs 12px
我想指出的一件事是，如果您尝试将空字符串乘以数字（例如，如果您在没有内联样式的情况下使用
style.fontSize
并将其[现在是空字符串]乘以整数，例如您的屏幕宽度[在本例中为 768]），它将输出0，这会将您的字体大小设置为 0，从而使其消失：
console.log(document.getElementById('download').style.fontSize * 768);
//outputs 0
此外，我注意到您正在将
resize
与
onload处理程序一起使用。我可能建议将
resize放入
onload处理程序中，除非您知道不会将其他代码放入
onload处理程序中（因为这会导致每次调整窗口大小时发生很多事情.)根据屏幕尺寸处理字体大小的另一个选项是 CSS 媒体查询（我建议在 Google 上搜索它。）
onresize=onload=function()
{
var innerW = window.innerWidth;
var boxtitle = document.getElementById("boxtitle").style.fontSize;
var boxtxt = document.getElementById("boxtxt").style.fontSize;
var ratio = innerW / 768;
boxtitle = boxtitle * ratio; //<--- try appending px example below up to you how you append it
document.getElementById("boxtitle").style.fontSize = '100px'
boxtxt = boxtxt * ratio; //<--- try appending px
}
然后，您只需附加它即可
onresize=onload=function()
{
var ratio = window.innerWidth / 768;
document.getElementById("boxtitle").style.fontSize = 3*ratio + 'em';
document.getElementById("boxtxt").style.fontSize = 0.9*ratio + 'em';
}
另一种方法是使用基于视口的指标 -
这是一个例子：HTML：
<div id="container">
<h1>Title</h2>
<div class="description">Description</div>
</div>
CSS：
#container{
font-size: 13px;
}
.container h1{
font-size: 150%;
}
.container .description{
font-size: 100%;
}
JS：
onresize=onload=function(){
var innerW = window.innerWidth;
var ratio = innerW / 768;
var boxtitle = Math.round(13 * ratio);
document.getElementById("container").style.fontSize = boxtitle + 'px';
}
.trustpilot-widget iframe {
transform: scale(2);
margin:auto;
}