子どものフォントサイズを掛ける

Question

これは不可能かもしれませんが、すべての子要素のフォントサイズを乗算する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> 

のようなたとえば、さまざまなフォントサイズを持っている場合。あなたは乗算・フォント・クラスのfont-sizeを宣言した場合はそのため、これはあなたがemユニットを使用した場合、どうなるまさにで、

Answer 1

...クラスなどがない場合よりも小さい/ X時間は大きくなります。 emは、フォントのサイズ（正確にはフォントの縦の高さ）を表し、デフォルトサイズは1 emです。

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

と宣言した場合、結果は正確に（フォントサイズが2倍の大きさで）記載されているはずです。

Answer 2

は実際にあなたには、いくつかのケースでは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)

ことを行うことができ、それは割合にすることができ、あなたはそれのために、このコードを改善する必要があります。

Answer 3

の@ 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>