Understanding px to em to percentages for responsive design

Question

So I came across some conversion math Target ÷ Context = Result Target to convert px to em percentages.

I understand that this keeps your layout fluid. What i don't understand is what to plug into the equation. Do i use this on everything i would normally use pixel sizes on ? Can anyone enlighten me on the proper way to convert and design using this ? Thanks

Answer 1

You can find more information about that formula on A List Apart

  target ÷ context = result

If we assume the body’s default type size to be 16px, we can plug each desired font-size value into this formula. So to properly match our header to the comp, we divide the target value (24px) by the font-size of its container (16px):

  24 ÷ 16 = 1.5

So the header is 1.5 times the default body size, or 1.5em, which we can plug directly into our stylesheet.

   h1 {
     font-family: Georgia, serif;
     font-size: 1.5em;        /* 24px / 16px = 1.5em */
   }

When dealing with text, em and % are pretty much equivalent:
100% == 1em
50% == 0.5em

When designing grids, I would straight up think in percentages (or columns) rather than do that conversion by hand.