如何使用ems和字体大小百分比准确调整嵌套元素的大小?

时间:2012-11-19 22:13:55

标签: javascript css percentage font-size em

我有一个带有文本框的旋转木马,每个图像,我的客户端(对HTML一无所知)使用WYSIWYG文本编辑器编辑文本框。由此产生的结果类似于你最糟糕的噩梦;类似的东西:

<div class="carousel-text-container">
<span style="font-size:18pt;">
    <span style="font-weight:bold;">
         Lorem 
         <span style="font-size:15pt:">Dolor</span>
     </span>
    Ipsum
    <span style="font-size:19pt;">
         <span>&nbsp;</span>
         <span>Sit<span>Amet</span></span>
   </span>
</span>
</div>

此网站必须以3种不同的尺寸显示,以容纳较小的显示器,因此我一直在使用CSS媒体查询来调整网站的大小。

现在我无法正确调整文本框内的文本大小。我尝试使用jQuery.fn.css获取px中每个元素的字体大小,然后将其转换为em。然后,通过在font-size:x%上设置.carousel-text-container类型的声明,我希望这会适当地调整所有内容。

不幸的是,在ems中应用font-size似乎存在递归性质。也就是说,.example未在下面正确调整大小,因为其父级也在影响它

<span style="font-size:2em;">
    Something
    <span class="example" style="font-size:1.5em;">Else</span>
</span>

如何可靠而精确地调整所有内容的大小,以便为.carousel-text-container的所有孩子实现原始字体大小,边距,填充,行高等的真实百分比?

现在,我正在设想某种递归JavaScript函数:

var carouselTextBoxEl;
function resizeCarouselTextBox () {
    // some example numbers thrown in
    var newWidthRatio = .8,
    function resizeCarouselTextBoxEl (el, nestedLevelNum) {
        nestedLevelNum = nestedLevelNum || 1;

        var childElFontSizePxStr = parseFloat(el.css('font-size')), // 16.2984392, for example
            // calculate new font size based on
            // width ratio of original size site to new size,
            // and do something with nestedLevelNum... what's the math with that?
            newChildElFontSizePxStr = childElFontSizePxStr * newWidthRatio,
            // get children of el, if any
            elChildrenEls = el.children(),
            i = elChildrenEls.length;

            el.css('font-size', newChildElFontSizePxStr + 'em');               
            while (--i >= 0) {
                resizeCarouselTextBoxEl(elChildrenEls[i], nestedLevelNum + 1);    
            }

    }

    carouselTextBoxEl.children().each(function () {
        resizeCarouselTextBoxEl($(this)
    });    
}
onSmallerScreen(resizeCarouselTextBox);

更新:我让客户利用调整某些单词的大小来用作标题等,所以我不能简单地将所有内容设置为单个字体大小。

只是一个想法:是否可以放入HTML5画布并拍摄快照和/或调整大小?

1 个答案:

答案 0 :(得分:0)

这是CSS(层叠样式表)的一种特性,所有子元素都继承其父元素的样式:)

我会使用jQuery以dinamically方式选择给定容器的所有子元素并更改其字体大小:

$('.carousel-text-container').find('*').css('font-size', '14px');

或者,您可以删除字体大小,以便所有子元素都使用为.carousel-text-container类声明的字体大小:

$('.carousel-text-container').find('*').css('font-size', '');