BigsonDev Logo
Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Discover Mentorship
Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Discover Mentorship
Home/Pills/ Pill - CSS Relative Units/
Home/Pills/Pill - CSS Relative Units/
Image by patricia serna from Unsplash

CSS Relative Units

Jan 14, 2021

DESCRIPTION

Do you only use pixels or % in CSS? Open yourself to more possibilities and best practices with other available units.

Preview

Relative units

HTML
CSS

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.
PreviousReact counter hook
Next ECMAScript new features
THE GUIDE TO BEAT FRONTEND INTERVIEW
From time to time, I'll send you messages about new blog posts, knowledge pills, and mentoring promotions. Only valuable information, no spam included. You can unsubscribe at any time.
slack
Let's build a community that will help each other.
spread the word
You don't need to, it's okay...