If you set the <body>
element to have font-size: 100%
then you are effectively setting the pixel size base line to be 16px
.
So now 1em
equals 16px
.
To size either our text or our layouts to match what the designer has specified in pixels we use the following calculation:
target / context = result
This means if your target font size for a <h1>
is 24px and your 'context' (the container) is 16px then you calculate this as:
24 / 16 = 1.5
So you set your font size to 1.5em
.
Same for a layout. If the designer has made the website 960px
wide and has an element within it that is 900px
wide.
First thing to do is to set the 960px
width to be a percentage. Well we have to just take a guess on this I'm afraid so we'll choose 90%.
But thankfully to turn 900px
into a percentage we can use the previous calculation of target / context = result
again:
900 / 960 = .9375
But now (as you're using percentages for your layout) you move the decimal over two places: 93.75%