How to decide CSS units for responsive website?

When it comes to create a responsive website to fit the every device, It is important to know the right CSS units. But before diving into decision making, let's classify them to know their class.

1. Absolute units
   • px - Pixel
   • pt - Point
   • pc - Picas
   • in - Inch
   • cm - Centimeter
   • mm - Millimeter
2. Percentage units
   • percentage % unit
3. Relative units
   • Relative to font size
     • em
     • rem - root em
   • Relative to view port/document
     • vw
     • vh
     • vmax
     • vmin

We are learning here the most common units:

px unit

In absolute px unit is only used for screen (interface) and rest of units are for print. px unit is not a good choice, actually this is not for scaling. px unit is fixed in size no matter what screen size you choose. That's why px unit is always preferred for borders because borders also kept fixed across all screen sizes.

% unit

This is used for setting the width of element and it's always relative to its immediate parent element size. If there's no defined parent then by default body is considered the parent.

Considering a box with 500px of width and a h1 element inside

.box{
  width: 500px;
  border: 1px solid crimson;
  padding: 10px;
}
h1{
  width: 50%;
  border: 1px solid;
}

👉 if there's no parent defined then root will be considered as the default parent.

em unit

em unit is always relative to the font size of it's immediate parent. 1em == to the size of parent's font size. Default font size is 16px if not overridden, let's say in parent element the font size is 48px then in the child element 1em == 48px.

h1{ 
  font-size: 1em; /* now 1em == 16px */
}

.container{
   font-size: 48px; 
/* or 3em, because default font-size is 16px
& it's parent is body so, 3*16px will be 48px */
}
h1{
   font-size: 1em; /* now 1em == 48px */
}

we can use this unit for margin and padding because it can allow us to use flexible spacing around the boxes according to our font-size of the element. So, element font-size will change according to device size therefore, spacing around the element will also change respectively.

rem unit

r stands for root em and unlike em it's always relative to the root font size no matter what font size it's very next parent element has. if the root has redefined font-size like 60px then 1rem == 60px in child.

html{
   font-size: 60px;
}
.container{
   font-size: 16px;
}
h1{
   font-size: 1rem;
}

vw unit

vw stands for the viewport width which means vw is always relative to the 1% of the width of root, irrespective of parent element's width. So, if 1vw == 1% then 100vw == 100% of the viewport width.

let's consider a following example where the width of one child is relative to parent size and other's is relative to root.

.container{
  width: 600px;
  border: 2px solid black;
  text-align: center;
  font-size: 20px;
}
.box1{
  width: 100%;
  background: skyblue;
}
.box2{
  width: 70vw;
  background: pink;
}

vh unit

vh stands for viewprot height like vw it's also relative to the 1% height of root/document.
let's consider a following example where the height of one child is relative to parent size and other's is relative to root.

.container{
  border: 2px solid;
  font-size: 40px;
  width: 800px;
  height: 400px;
  display: flex;
  text-align: center;
  margin: 0 auto;
}
.box1{
  height: 100%;
  width: 50%;
  background: skyblue;
}
.box2{
  height: 100vh;
  background: pink;
  width: 50%;
}

Summary

• px unit for borders.
• % unit for width relative to parent.
• em unit for margin and padding relative to fonts size of element.
• rem unit for fonts size relative to root.
• vw and vh for width and height relative to root.

These are the 6 css unit, which are the most commonly used to make the website responsive.

Hope, I have helped you to understand these concepts somehow. Your feedback will be appreciated 👏

I would love to connect with forntend devs on linkedin

Comments

[𒎏Wii 🏳️‍⚧️]

• em is the parent font size only if it appears in the font-size property, otherwise it's the elements own font-size
• vw isn't the width of the browser window, but the viewport. That is, window borders are not included*.
• same for vh

* For whatever reason, scroll bars are included though, which I find mildly infuriating.

[Akram Narejo]

my bad, but again I have already mentioned that what the vw stands for.

[G Paterne]

Très bonne explication. Car, certains utilisent les unités dans le désordre.

[Thomas Sentre]

Surtout les développeurs-youtubeurs

[Akram Narejo]

merci à vous deux.

[jlop]

Its an amazing explication , but if the em unit is relative to the font size , and the font size is on em , and 1 em equals 16 px , then , there is no responsive here , we still using a fixed unit because we're using a reference to px ???

[𒎏Wii 🏳️‍⚧️]

The important difference is that em ultimately depends on the user agent configuration, which may take into account the device and user preferences. That is, unlike we set a font-size to an absolute value somewhere, which is a big no in most cases.

Also, many elements change font-size; say your h1 has a font-size of 1.8em and your a.buttom has an outline of .2em, so a button in a heading will get a thicker outline than in the main text, according to the difference in font-size.

[Just Another Developer]

You can also set a max-width in characters instead of pixels, ems, etc. which is pretty sweet:
e.g. p{max-width:80ch;}

[Senthilkumar Devaraj]

Amazing 👏👏

[Devtechk]

The most useful css units explanation. Nothing is so easy to understand! Great infographic but it will be better if improved like just a little bit specific and in pdf. Thank you!

[Akram Narejo]

Sure, will improve if got the time.