Question

我对javascript很新，但我正在努力。

我在图像上有一个带有div容器的图像。 div容器包含2个标题内部div和一些文本。标题的字体大小大于文本。

我用来工作和开发的屏幕内容是768。

我希望javascript根据浏览器窗口的比例更改加载时的字体大小和调整大小...所以如果浏览器窗口大30％...字体应该比之前定义的大30％ css ......这是我制作的代码......但它没有用。

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

Answer 1

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
}

Answer 2

您正在将变量的值设置为字体大小（您不存储对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.

有一点需要注意（我还没有在其他浏览器中测试过），在Firefox for Mac中，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媒体查询（我建议谷歌搜索它。）

Answer 3

首先，您必须存储原始值，否则您将在每次调整大小时获得不同的字体大小

然后，你只需要追加它

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';
}

另一种方法是使用基于视口的指标 - http://snook.ca/archives/html_and_css/vm-vh-units

Answer 4

如何使用字体大小的百分比代替所以一切都保持成比例。您只需将顶级字体大小限制为不是百分比，如示例中所示。否则，您将在Javascript中尝试维护这么多字体大小的噩梦。

以下是一个例子：http://jsfiddle.net/yL89q/

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';
}

使用javascript在div内部调整大小时更改fontsize

4 个答案: