vh, vw, vmin, vmax: How to use CSS Viewport Units

► We can define the viewport as the visible dimensions of the browser window in which your web page displays.

Viewport units then, are those that size elements relative to the dimensions of the viewport.

Viewport units include:

vw (viewport width)
vh (viewport height)
vmin (the viewport minimum)
vmax (the viewport maximum)

... and we will cover all of these in this video

Viewport units take numbers between 1 and 100 as values, and each number represents a percentage of the viewport. So for example, 50vw represents a value that is sized to half of the width of the viewport. 80vh represents a value that is sized as 80% of the height of the viewport, and so on.

► Timestamps:
0:00 Start
0:38 Defining the viewport and viewport units
1:01 The vw unit
1:51 How viewport units work
2:50 Viewport height and the vh unit
4:19 The vmin unit
6:25 The vmax unit
7:29 Summary
8:59 Browser support for viewport units
9:12 End

► Get the code:
CodePen: https://codepen.io/craigabourne/pen/a...

► Useful links:
MDN CSS Values & Units: https://developer.mozilla.org/en-US/d...
MDN - What is a Viewport? https://developer.mozilla.org/en-US/d...
Sitepoint - Viewport Units: https://www.sitepoint.com/css-viewpor...
Can I Use: https://caniuse.com/viewport-units

► This video is part of the CSS for Absolute Beginners playlist:    • CSS for Absolute Beginners  

► Social Media:
  / craigabourne  
  / craigabourne  

► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne