フォントサイズが画面サイズに比べて変化しないのはなぜですか？

Question

私はfont-size: 4em;を使用していますが、これは相対的なサイズであると理解していますか？しかし、ウィンドウのサイズを変更すると、フォントサイズは変わりません。それは同じままで、重複して見苦しいです。私が言及していたテキストは、「テストのタイトル」ここ

が、それはフルスクリーン（2,560）のように見えるものであり、私はそれ

と満足しています。しかし、これは、それは半分の画面のように見えるものである

モバイルではさらに悪化しています。

h1, h2, h3, p { 
 
\t color: #39382e; 
 
} 
 

 
.left h1 { 
 
    \t margin-top: 90px; 
 
    \t color: gray; 
 
    \t font-size: 4em; 
 
    \t text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15); 
 
} 
 
    
 
.left h2 { 
 
    \t color: gray; 
 
    \t font-size: 1em; 
 
    \t margin-top: -50px; 
 
    \t font-weight: lighter; 
 
} 
 

 
div.left { 
 
    width: 20%; 
 
    display: inline-block; 
 
    overflow: auto; 
 
} 
 
#upperleft, #lowerleft { 
 
    \t min-height: 360px; 
 
    \t max-height: 361px; 
 
    \t max-width: 551px; 
 
    \t border: 1px solid white; 
 
    \t border-radius: 5px; 
 
}

\t \t <div class="left"> 
 
\t \t \t <div id="upperleft"> 
 
\t \t \t \t <h1>Web Design</h1> 
 
\t \t \t \t <h2>Put your business online for the world to see</h2> 
 
\t \t \t \t <a href="#" class="learnmore"> 
 
\t \t \t \t \t <div>Learn More</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t \t <div id="lowerleft"> 
 
\t \t \t \t <h1>Contact us</h1> 
 
\t \t \t \t <h2>Get a quote or ask us a question today</h2> 
 
\t \t \t \t <a href="#" class="learnmore"> 
 
\t \t \t \t \t <div>Learn More</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 1

しかし、ウィンドウのサイズを変更しても、フォントサイズは変わりません。

em単位は相対的ですが、ビューポートに相対的ではなく、親要素の計算されたフォントサイズ（font-sizeプロパティに設定されている）に対して相対的です。応じてベースフォントサイズを変更するメディアクエリを使用します）

1：ビューポート

のサイズを変更する際、もちろんあなたは、フォントサイズがビューポートに変更したい場合は、次の2つのオプションを持っているので、変更されません。ビューポートの幅/高さ（フォントサイズをそれぞれ変更する要素でrem単位を使用している可能性があります）または

2）ビューポート単位などを使用します。font-size: 2vw;

Answer 2

あなたは（bodyまたはhtmlに）あなたのフォントサイズのベースサイズを設定していません。 font-sizeを相対的なサイズ（パーセンタイル）に設定すると、サイズが適切に変更されます。 emが相対サイズであっても、相対的な内容を知る必要があります。〜