$（window）.resize（）和$（document）.ready（）計算出不同的值

我正在嘗試使用jQuery進行文本自適應。這裏是小提琴：

你可以看到一個div它的一些文字。 div沒有指定的高度，它的高度是從文本高度和頂部和底部的10％填充來計算的。

我希望font-size能夠響應。比方說，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);

，但只有當我調整頁面大小。當我重新加載時，有一些不同的價值。爲什麼同一個函數給resize和onload賦予不同的值？

來源

2015-11-23 qtxt

它適用於我。如果你想要響應文本，你可以嘗試使用em而不是px –

我觀察到什麼大小的更改的原因是：

1.當你剛剛重裝.the功能只運行一次。

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

來源

2015-11-23 11:05:52

嗯，我試着用你的代碼，看到「TypeError：$（...）。innerHeight（...）。toFixed不是一個函數」。它應該表現得如此嗎？ – qtxt

選擇你的jquery文件，例如：JQuery 1.6.4 –

-1

我試過這個，它對我來說都有效，對我來說都是一樣的。試試這個

來源

2015-11-23 10:27:35

我在控制檯中看到一個錯誤。 – qtxt

$（window）.resize（）和$（document）.ready（）計算出不同的值

回答

相關問題