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
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: 16pxon the <html> element.16px is now your root measurement, hence
1rem = 16pxEvery time you reference REM, it will use that 16px value as the base (or whatever value you set there). So
.5remis 8px,.25remis 4px,2remis 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
1remis 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 dopadding: 1remwhich will add 16px to all sides or you could dopadding: 1emwhich will add 32px to all sides. Why? Because this element's font-size is2rem(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