How to set min-font-size and max-font-size with CSS?

To set min-font-size and max-font-size with CSS, we use media queries.

For instance, we write

@media all and (min-width: 960px) {
  h1 {
    font-size: 50px;
  }
}

@media all and (max-width: 959px) and (min-width: 600px) {
  h1 {
    font-size: 5vw;
  }
}

@media all and (max-width: 599px) and (min-width: 50px) {
  h1 {
    font-size: 6vw;
  }
}

to set the font size for h1 elements according to different screen widths.

We set font-size to 50px for screens with width 960px or larger.

We set their font-size to 5vw for screens between 600px and 959px wide.

And we set their font-size to 6vw for screens between 50px and 599px wide.