DEV Community

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

How to decide CSS units for responsive website?

Akram Narejo on August 06, 2021

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

Collapse
 
akramnarejo profile image
Akram Narejo

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
 
devland profile image
Thomas Sentre

Surtout les développeurs-youtubeurs

Collapse
 
akramnarejo profile image
Akram Narejo

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
𒎏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.

Collapse
 
pavlicko profile image
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;}

Collapse
 
dsk90it profile image
Senthilkumar Devaraj

Amazing 👏👏

Collapse
 
devtechk profile image
Devtechk • Edited

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

Sure, will improve if got the time.