Viewport Width Units In CSS

Let’s say you have a simple problem: that problem is to make text match a set width or height regardless of the view screen’s size. The answer: using CSS and the viewport sizing. Below are some quick examples of what text looks like when different viewport sizes are applied. One unit in the width 0.5% of the viewport’s width. One unit in the viewport’s height is equivalent to 1% of the available height. If you want the text to be 10% of the view port height? That would be done with font-size: 10vh;

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

When you use this, experiment! Other CSS rules may not entirely cooperate with viewport sizing. Your mileage may vary.

Variable based on height.

 .largeheight {
  font-size: 2vh;
  }

Variable based on minimum.

 .largemin {
  font-size: 2vmin;
  }

Variable based on maximum.

 .largemax {
  font-size: 2vmax;
  }

0123456789

 .largetenheight {
  font-size: 10vh;
  line-height: 10vh; 
  }

Variable based on width.

.largewidth {
  font-size: 2vw;
  }

12345

 .largetenwidth {
  font-size: 20vw;
  line-height: 20vw; 
  }

Want to convert CSS units into variable units?