Viewport Sized Typography & Elements

In CSS3 we received some new values for sizing elements relative to the current viewport size: vw, vh, and vmin. The ability to scale elements based on screen width and height is an important aspect of modern day mobile friendly web design. Specifying dynamic sizes in your project will help ensure that your web elements are displayed properly for every visitor.

One unit is equal to 1% of the viewport axis. When we say ‘Viewport’ we are referring to the browser windows total size.
If our browser window is 100px wide, 1vw = 1px.

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

You can specify viewport width and height on text, images, buttons, inputs, etc. Below you will see an example using both text and images. Please resize your screen to see the full effect.

See the Pen Viewport Height and Width – VW VH by waltir. (@waltir) on CodePen.dark

0