この解答例はChatGPTによって生成されています,正しいかは自己判断で。 皆の投稿からも解答例が見つかるかもしれませんよ。
BFE.devでのAI解答例 - CSS 質問
24. fluid font size
@media screen and (max-width: 200px) { .title { font-size: 16px; } }
@media screen and (min-width: 401px) { .title { font-size: 32px; } }
@media screen and (min-width: 201px) and (max-width: 400px) { .title { font-size: calc(16px + (32 - 16) * ((100vw - 200px) / (400 - 200))); } }
/*Note:
- The 'calc' function is used to calculate font-size based on viewport width.
- '100vw' represents 100% of the viewport width.*/
<h1 class="title">BFE.dev</h1>