兒童的字體大小的相乘

-1

這可能是不可能的，但我想添加一個CSS（理想上只用css），它可以乘以所有兒童元素的字體大小。舉例來說，如果你有不同的字體大小：兒童的字體大小的相乘

<h1>This is heading 1</h1> 
<h2>This is heading 2</h2> 
<h3>This is heading 3</h3>

我想補充一類：

<div class="multiply-font"> 
    <h1>This is heading 1</h1> 
    <h2>This is heading 2</h2> 
    <h3>This is heading 3</h3> 
</div>

如所有的大小將由係數相乘。因此，將比沒有課程時大X /小X等...

來源

2017-04-09 ncohen

爲什麼不嘗試青菜^^ –

@Hemant不是很熟悉sass ...你能否提出一點你的評論？在這種情況下可以做什麼？ – ncohen

如果您聲明font-size爲乘法字體類，這正是如果使用em單位會發生什麼情況。 em將1 em作爲默認尺寸，指您的字體大小（或字體的垂直高度）。如果你聲明與

.multiply-font{ 
    font-size: 2em; 
}

結果應該是完全一樣的描述（字體大小兩倍大）。

來源

2017-04-09 10:48:54 starick

其實你可以做到這一點與JavaScript

var font_size = $('.multiple').css('font-size'); 
 
    var old_size = font_size.slice(0,font_size.length-2)*2; 
 
    var font_type = font_size.slice(font_size.length,font_size.length-2); 
 
    $('.multiple').css('font-size',old_size+font_type)

在某些情況下，它可以是個和你需要改進的代碼吧。

來源

2017-04-09 10:49:28

它適用於所有的孩子嗎？ – ncohen

當你爲它的孩子循環時，是的 –

如前所述通過@ J-starick，你可以用EM-單位做到這一點 - 如本例中所示：

.multiplycontent { 
 
font-size: 2em; 
 
}

<h1>Test heading h1</h1> 
 
<h2>Test heading h2</h2> 
 
<h3>Test heading h3</h3> 
 

 
<div class="multiplycontent"> 
 
<h1>Test heading h1 multiplied</h1> 
 
<h2>Test heading h2 multiplied</h2> 
 
<h3>Test heading h3 multiplied</h3> 
 
</div>

來源

2017-04-09 11:01:10 junkfoodjunkie

兒童的字體大小的相乘

回答

相關問題