The Responsive Grid
At this point we want to take the Static Layout and convert it to something more responsive.
For Example the grid we created in class used the following dimensions
.container{
width:960px;
margin: 20px auto;
}
header[role="banner"], footer[role="contentinfo"]{
width:920px;
float:left;
background:pink;
margin-left:20px;
}
#content{
width:638px;
margin-left:20px;
float:left;
background:blue;
}
aside{
width:262px;
float:left;
background:red;
margin-left:20px;
}
To convert this into something more responsive we need to use the following formula.
Target / Context = Result
Let’s work through this rule by rule.
.container
While we can certainly declare a percentage width for our containing element, I prefer to maintain some control over width so rather than declare in percentages for our containing element we are going to use the max-width css property. This allows us maintain limits on the overall width but at the same time we can still scale down as needed.
#content
The fixed width dimensions of this element was 638px to convert this to percentages the math looks like so…
638px (target) / 960px (context)= 0.664583333
Slide the Decimal two places to the right and we have our first percentage width element!
New Width = 66.4583%
We also have a 20px margin to consider. Lets convert that to percentages as well.
20px (target) / 960px (context) = 0.0208333333
Slide the Decimal two places to the right.
New Width = 2.08333333%
Go ahead and convert the rest using this formula. When you are done you should have something like this…
.container {
max-width: 960px;
}
#content {
width: 66.4583%;
margin-left: 2.083333%;
}
aside {
width: 27.2916667%;
margin-left: 2.083333%;
}
header[role="banner"], footer[role="contentinfo"] {
width: 95.83333%;
margin-left: 2.083333%;
}