1

我有一个带有每个图像的文本框的轮播，我的客户（对 HTML 一无所知）使用所见即所得的文本编辑器编辑文本框。由此产生的输出类似于你最糟糕的噩梦；就像是：

<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 中的应用似乎具有递归性质。也就是说，.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 画布中并以这种方式拍摄快照和/或调整大小？

4

1 回答 1

0

This is a nature of CSS (Cascading Style Sheets) that all child elements inherit styles of their parents :)

I would use jQuery to dynamically select all child elements of the given container and change their font size:

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

Alternatively, you can remove font size so that all child elements will use font size declared for .carousel-text-container class:

$('.carousel-text-container').find('*').css('font-size', '');
于 2012-11-19T22:23:23.467 回答