レスポンスフォントサイジングを実装する簡単な方法

Question

各要素（h1、h2、h3）のフォントサイズを設定するのではなく、メディアクエリのx量を縮小するようにすべてのフォントサイズを設定する方法はありますか？ は現在、私はこのようになりますメディアクエリを持っている：

@media only screen and (min-width : 1200px) { 
    body { 
    font-size: 20px; 
    } 
} 

これは、しかし、見出しのサイズを設定しません。サイトにすべてのテキストを含める方法はありますか？ありがとう

Answer 1

はい、基本的にhtmlのようなルート要素のフォントサイズをピクセル単位で設定してから、rem単位を使用して他の要素のフォントサイズを設定することができます。あなたの@mediaルールではhtml要素のfont-sizeプロパティだけを変更する必要があり、remを使用するので、ルートのフォントサイズに依存するので、他の要素にも同様に影響します。

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; 
    } 
} 

Answer 2

div{font-size:15px;} 
 
@media screen and (max-width:1200px) { 
 
    div{font-size:20px;} 
 
} 
 
@media screen and (max-width:600px) { 
 
    div{font-size:25px;} 
 
} 
 
@media screen and (max-width:320px) { 
 
    div{font-size:50px;} 
 
}

<div>test font size</div>