Yet another CSS unit that solves problems we didn't know we had:
vw for "viewport width" and
vh for "viewport height".
1vw is going to equal 1% of however wide the viewport is. Likewise,
1vh equals 1% of however tall the viewport is. Note that you don't have to use
vw just for widths, and you don't have to use
vh for just heights. You can mix and match the two to get some interesting layouts. Here's some examples from Jen Simmons: https://labs.jensimmons.com/2017/01-010.html
These are relative units, which means they won't always be the same size, as you can't always predict how the window will be sized, or which orientation it's in. While relative units look like a CSS stick-in-the-mud, they're actually lifesavers when used right. Example incoming... tomorrow.