この解答例は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>