Use vmin and vmax units for element size (especially type). REMs and EMs are pretty fundamental now.
Here's a quick explainer how they work:
Your "root-most" element should have a font-size specified. So let's say you put font-size: 16px on the <html> element.
16px is now your root measurement, hence 1rem = 16px
Every time you reference REM, it will use that 16px value as the base (or whatever value you set there). So .5rem is 8px, .25rem is 4px, 2rem is 32px, etc.
What about EM, then? Well, EMs are what I like to call local. They respond to the font-size set on the element that you're modifying. So let's say your 1rem is 16px. You just made a header but gave it a bigger font-size: 2rem. How would you go about adding some padding to that header? Simple, you could do padding: 1rem which will add 16px to all sides or you could do padding: 1em which will add 32px to all sides. Why? Because this element's font-size is 2rem (32px), so EM is calling the local font-size to determine what value it should be.
I think about it like this:
REM ā R(oot)ElementMeasurement ā root size
EM ā ElementMeasurement ā local size
Yes, that's what I do. I set the root font-size on my <html> tag and then use REMs and EMs where applicable. For all elements, not just type.
If you modify your <html> font-size with a media query, every measurement will change with it.