我有一个带有文本框的旋转木马,每个图像,我的客户端(对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> </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画布并拍摄快照和/或调整大小?
答案 0 :(得分:0)
这是CSS(层叠样式表)的一种特性,所有子元素都继承其父元素的样式:)
我会使用jQuery以dinamically方式选择给定容器的所有子元素并更改其字体大小:
$('.carousel-text-container').find('*').css('font-size', '14px');
或者,您可以删除字体大小,以便所有子元素都使用为.carousel-text-container
类声明的字体大小:
$('.carousel-text-container').find('*').css('font-size', '');