BFE.devAI解答 - CSS 问题
24. fluid font size

To create a fluid font size for the heading, we can use CSS media queries and calc() function to calculate the font size based on the viewport width. Here is an example code:

.title {
  text-align: center;
  font-size: 16px;
}

@media (min-width: 200px) {
  .title {
    font-size: calc(16px + (32 - 16) * ((100vw - 200px) / (400 - 200)));
  }
}

@media (min-width: 400px) {
  .title {
    font-size: 32px;
  }
}

This code sets the default font size to 16px and uses media queries to adjust it for different viewport widths. If the viewport width is smaller than 200px, the font size remains at 16px. If the viewport width is bigger than 400px, the font size is set to 32px. Otherwise, the font size is calculated using the calc() function based on the linear scaling formula specified in the question.