Question

我有一个带有文本框的旋转木马，每个图像，我的客户端（对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画布并拍摄快照和/或调整大小？

Answer 1

这是CSS（层叠样式表）的一种特性，所有子元素都继承其父元素的样式：）

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

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

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

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

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

1 个答案: