DEV Community

Cover image for How to decide CSS units for responsive website?
Akram Narejo
Akram Narejo

Posted on

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:
CSS 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;
}
Enter fullscreen mode Exit fullscreen mode

percentage unit

👉 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 */
}
Enter fullscreen mode Exit fullscreen mode

1em size

.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 */
}
Enter fullscreen mode Exit fullscreen mode

3em font-size
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;
}
Enter fullscreen mode Exit fullscreen mode

1rem 60px

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;
}
Enter fullscreen mode Exit fullscreen mode

vw unit

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%;
}
Enter fullscreen mode Exit fullscreen mode

vh unit

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

Discussion (11)

Collapse
darkwiiplayer profile image
DarkWiiPlayer
  • 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.

Collapse
akramnarejo profile image
Akram Narejo Author

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

Collapse
teamflp profile image
G Paterne

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

Collapse
thomasmax99 profile image
Thomas-Max99

Surtout les développeurs-youtubeurs

Collapse
akramnarejo profile image
Akram Narejo Author

merci à vous deux.

Collapse
jlopcun profile image
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 ???

Collapse
darkwiiplayer profile image
DarkWiiPlayer

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.

Collapse
pavlicko profile image
David Pavlicko

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

Collapse
dsk90it profile image
Senthilkumar Devaraj

Amazing 👏👏

Collapse
devtechk profile image
Devtechk • Edited on

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!

Collapse
akramnarejo profile image
Akram Narejo Author

Sure, will improve if got the time.