1

我有一个宽度为 400 像素，高度为 200 像素的 DIV。在这个 div 里面是另一个 div，在 50,50 位置有一些文本，字体大小为 14px；

当父 DIV 调整大小（例如到 600px x 300px）时，我希望子 DIV 内的文本大小也调整大小（到更大的字体大小），等于调整大小的父 DIV。

我怎么能用 jQuery 和 HTML 做到这一点？

4

4 回答 4

3

使子 div 的宽度和高度为 100%

childDiv {
 display:block;
 width: 100%;
 height: 100%;
 position:relative //so you dont lose the positioning of your text
}
于 2013-10-11T17:17:16.820 回答
1

例如，当父潜水尺寸从 (400 / 200) 变为 (600 / 300) 时，您应该像这样将 javascript 函数应用于子 div

function resizeFont(parentElementId, childElementId, newWidth) {

    currWidthParentElement = parseFloat( $(parentElementId).width() ); // get current width
    currChildFontSize = parseInt( $(childElementId).css('font-size') ); // get font size for child   

    percentaRaise = (newWidth - ceil(currWidthParentElement)) * (100/ceil(currWidthParentElement)); // calculate how much parent increase

    // calculate and apply new font size
    newFontSize = currChildFontSize * percentaRaise/100 + currChildFontSize;

    $(childElementId).css(newFontSize);


}

is 看起来很棘手，但却是简单的代数。我希望这会帮助你

于 2013-10-11T18:07:55.130 回答
0

jquery 有一个扩展，它允许在元素上触发调整大小，就像在窗口本身上一样。

扩展：Jquery Resize Plugin

所以像这样的东西可以解决问题：

$("#parent").resize(function(){
    var newFontSize = $("#parent").height() * 0.07 
    $("#child").css("font-size",newFontSize +"px");
});

看看这个 JsFiddle 的例子：http: //jsfiddle.net/Mm3jr/1/

于 2013-10-11T17:52:41.907 回答
0

http://codepen.io/rafaelcastrocouto/pen/EiFIL

var div = $('div');
$(window).on('resize', function(){  
  var u = div.width() / 200;
  div.css('font-size', u +'em');  
});
于 2013-10-11T17:17:57.967 回答