Responsive Design & Flexible Values: Formula

ResponsiveDesignFlexibleValuesFormula

target : context = result

For ems (fonts):

ex:

body {
     font-size: 100%;
}

h1 {
     font-size: 24px;
}

*default baseline is 16px

24 : 16 = 1.5

The new heading is now 1.5em:

h1 {
     font-size: 1.5em;
}

For percentages (layouts):

ex:

.wrapper {
     width: 1000px;
}

article {
     float: left;
     width: 700px;
}

aside {
     float: right;
     width: 300px;
}

*the same formula, but now after we get the result, we move the decimal dot two digits to the right

article: 700 : 1000 = 0.7 => move the dot and we get: 70%
aside: 300 : 1000 = 0.3 => move the dot and we get: 30%

The new layout is now:

.wrapper {
     width: 1000px;
}

article {
     float: left;
     width: 70%;
}

aside {
     float: right;
     width: 30%;
}

*please note: the wrapper is not flexible at this point, this is just to grasp the concept of flexible percentage values.