Image by patricia serna from Unsplash
DESCRIPTION
Do you only use pixels or % in CSS? Open yourself to more possibilities and best practices with other available units.
Preview
Relative units
Summary
- Each unit has its own use cases and best practices.
- I love using
rem
as it's a scalable unit and consistent across devices (if proper media queries are set in root HTML element). Also, a lot of duplication is removed as e.g. font is changed in one place. viewport
units can be a good solution for full-page screens and other scenarios where you need to take viewport size into consideration.- Always Check supported browsers on caniuse for the unit you use.
- Read more best practices about CSS units.