$(window).resize()和$(document).ready()计算的值不同。

Question

$(window).resize()和$(document).ready()计算的值不同。

5

我正在尝试使用jQuery使文本自适应。以下是相关示例：

您可以看到一个带有文本的div。该div没有指定高度，其高度是由文本高度和顶部和底部各10%的填充计算出来的。我想要字体大小具有响应性。假设div的原始大小为124px，字体大小为50px，因此我想保持这个比例。这意味着我需要知道50在124中占多少百分比。大约是40.32（50/124*100）。这意味着我需要将字体大小设置为等于容器高度/100*40.32的值。以下是我使用的代码：

function foo(){
var container = $(".box");
var containerHeight = $(".box").innerHeight().toFixed();
var neededSize = (containerHeight/100*40.32).toFixed();

container.css("font-size", neededSize + "px");
}

$(window).resize(foo);
$(document).ready(foo);

这似乎是有效的，但只有在我调整页面大小时才有效。当我重新加载页面时，会出现一些不同的值。为什么同样的函数在调整大小和加载时会给出不同的值？

- user4851524

对我来说它很好用。如果你想要响应式文本，可以尝试使用 em 而不是 px。 - Iván Rodríguez Torres

2个回答

-1

我尝试了这个，对我来说都可以给出相同的结果。试试这个：container.css("font-size":neededSize + "px");

- Kartikeya Sharma

我在控制台中看到了一个错误。 - user4851524

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amar Singh · Accepted Answer

我注意到尺寸的变化是因为：

1. 当您只重新加载时，函数仅运行一次。 2. 但是当您调整大小时，函数运行两次，并更改字体大小，因为根据新高度再次进行计算。重点是在调整大小时，它计算了错误的innerheight。

请参见此内容：

function foo(jQuery ){
    var container = $(".box");
    var containerHeight = $(".box").innerHeight(true).toFixed(2);
    var neededSize = (containerHeight/100*40.32).toFixed(2);
alert(containerHeight );
    container.css("font-size", neededSize + "px");
}

$(window).resize(foo);
$(document).ready(foo);

调整大小方法不可靠。在调整大小处理程序中的代码不应该依赖于处理程序被调用的次数。根据实现，调整大小事件可以在调整大小正在进行时持续发送（在Internet Explorer和基于Webkit的浏览器（如Safari和Chrome）中的典型行为），或只在调整大小操作结束时发送一次（在其他一些浏览器中，如Opera的典型行为）。