Skip to main content
The Basics
The Basics
Technical Stuff
- This is all happening on my web site, bixgomez.com -- no slides per se, just examples I put together for this session
- Drupal 8
- Bare bones custom theme based on Stable
- Sass
Viewport Units: vw, vh, vmax, vmin
- Use them wherever you'd use px or em or % to set dimensions on elements:
- font-size: 1.2vh
- height: 30vw
- padding-left: 5vmax
- vw = "viewport width"
1vw = 1/100 (or 1%) of the width of the viewport, which generally speaking is the browser window
- vh = "viewport height"
1vh = 1/100of the height of the viewport
- vmax = "viewport maximum"
1/100 of the viewport height or width -- whichever is larger
- vmin = "viewport minimum"
1/100 of the viewport height or width -- whichever is smaller
What's so great about them?
- Unlike every other unit of measurement, viewport units change their value dynamically as the viewport changes shape
- Can be used in conjunction with ems
- Set master font-size of a wrapper element using a viewport unit
- Set child sizes using ems
- Easier to set size ratios this way, then just adjust one viewport unit to adjust the overall sizing
- Viewport values can be used everywhere px, ems, rems, or % can be used:
- margin & padding
- heights and widths of all elements
- font size
What's not to love?
- Can't use the browser's native resize function!
- Renders (cmd/+) and (cmd/-) pretty much useless.
- Doesn't work too well on CodePen due to the layout interfering with the actual viewport dimensions
- Can sometimes be frustrating to work with when you have the inspector open, but not really.