Viewport Based Widths

  • Posted on: 7 May 2014
  • By: Shawn DeWolfe

Viewport SizingToday's post is late and rushed. Why? I have been sentenced to making a web page look EXACTLY like the print incarnation. Don't get me started on the deeper issues of readability and user engagement. 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 = 0.5% 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.

If you have a CSS stylesheet with fixed dimension units, but you want to convert those to variable viewport widths, you can use this tool I built, PX to VW CSS converter.

Variable based on height.
.largewidth {
  font-size: 2vw;

Variable based on width.
.largeheight {
  font-size: 2vh;

Variable based on minimum.
.largemin {
  font-size: 2vmin;

Variable based on maximum.
.largemax {
  font-size: 2vmax;

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

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

Last updated date

Sunday, January 7, 2018 - 20:12