TIL CSS v* units

Sunder Iyer - Apr 16 '21 - - Dev Community

2021-04-15

When games and browsers combine! I'm displaying text for a web visual novel using TuesdayJS and I'm running into font visibility issues on some devices.

Fortunately CSS has some useful units that work relative to the viewport! There's

  • vw - 0.01x of the viewport width
  • vh - 0.01x of the viewport height
  • vmin - 0.01x of the smaller of the two dimensions
  • vmax - 0.01x of the greater of the two dimensions

So far using a font size based on the vmin gives me a result that seems to work nicely on different screens.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .