アンダースコア（wordpress）で反応的なタイポグラフィを作成するには？

Question

アンダースコアの使い方を理解しようとしています。以下のようになる前に、異なるスクリーンのためのタイポグラフィ応答フォントを作るために、私は通常、異なるメディアクエリを記述します。

アンダースコアを使用して

@media screen and (min-width: 480px) { 
    html{ 
     font-size: 18px; 
    } 
    h1 { 
     font-size: 2rem; 
    } 
    h2 { 
     font-size: 1rem; 
    } 
     etc.. 
} 

    @media screen and (min-width: 700px) { 
     html{ 
      font-size: 14px; 
     } 
     h1 { 
      font-size: 0.5rem; 
     } 
     h2 { 
      font-size: 1.3rem; 
     } 
      etc.. 
    } 

子要素がrem大きさを持つことができますので、どのように私は、親のフォントサイズを変更できますか？

それは親要素であると考えられるように私は、フォントサイズを追加してみました（？）

/*-------------------------------------------------------------- 
# Typography 
--------------------------------------------------------------*/ 
body, 
button, 
input, 
select, 
optgroup, 
textarea { 
    color: #404040; 
    font-family: Merriweather, sans-serif; 
    font-size:20px; 
    font-size: 1rem; 
    line-height: 1.5; 
    color:red; 


} 

このための最善の方法でしょうか？

Answer 1

あなたはほとんどそれを持っています。

html { 
    font-size: 12px; 
} 

p { 
    font-size: 1.1rem; 
} 

.footer { 
    font-size: .9rem; 
} 

@media (max-width: 767px) { 
    /* now the basis for all the font sizes set in 
    rems is 10px. For example, font-size for p is 10*1.1 = 11px. 
    Previously it was 1.1*12 = 13.2px. */ 
    html { 
     font-size: 10px; 
    } 
} 

また、あなたは、いわゆるfluid typographyを使用し、それを組み合わせることができます：あなたはrem Sを使用する場合は、ビューポートに応じて、すべてのフォントを制御する必要がある唯一のものは、ルート要素のフォントサイズがhtmlを言うことができます変更することです応答を取得する従来のアプローチ（フォントは各時スケールであろう特定の制限を通過した後だけでなく試行を、リサイズ）と：1600px - - ビューポートのサイズを300ピクセルに依存26px範囲

html { 
    font-size: calc(14px + (26 - 14) * ((100vw - 300px)/(1600 - 300))); 
} 

はhtml 14pxでのフォントサイズをスケーリング。

PS。ほかに、ここで

font-size:20px; 
font-size: 1rem; 

最初に20ピクセルを設定し、1remでそれを書き換えるので、それは何の効果もありませんでした。 font-size: 1rem;を削除することができます。親要素（ボディ）のフォントサイズを20pxに設定しますが、それ以外の要素（入力、ボタンなど）に対しても同様にフォントサイズを設定します。html要素を含むアプローチは一般的でクリーナーです。