CSSフォントサイズを画面のサイズに合わせて調整する方法

画面のサイズにCSSのフォントサイズを自動的に応用するには、相対単位を使用することで可能。相対単位は、親要素のサイズやビューポートのサイズを基準に計算されるので、画面のサイズに応じてフォントサイズを動的に調整できます。

一般的な相対単位には含まれます：

1. rem: 根要素(タグ) のフォントサイズに対する相対的なフォントの大きさ。根要素のフォントサイズを設定することで、画面サイズに追従する全体ページのフォントサイズを実現できる。
2. em：親要素のフォントサイズに対する相対的なサイズ。親要素のフォントサイズを指定して、子要素のフォントサイズをそれに対する相対値に設定することで、画面に応じて自動的にサイズを調整することができます。
3. VW: 相対的な視口幅のパーセント。視口幅のパーセントを設定することで、フォントサイズを自動的に調整することができます。

以下にコードの例をいくつか示します。

1. ネイティブが話す日本語に言い換えてください。1つだけで構いません。

html {
font-size: 16px; /* 可根据需要设置根元素的字体大小 */
}
h1 {
font-size: 2rem; /* 相对于根元素的字体大小，此处为32px */
}

1. ナティブ的には、そのまま日本語にしてしまう。

body {
font-size: 16px; /* 可根据需要设置父元素的字体大小 */
}
h1 {
font-size: 2em; /* 相对于父元素的字体大小，此处为32px */
}

1. 現地語で言い換えた文を1つだけ示してください。

h1 {
font-size: 5vw; /* 相对于视口宽度的百分比，此处为屏幕宽度的5% */
}

画面サイズに合わせて、このサンプルコードのフォントサイズは状況に応じて調整できます。