Ethan Marcotte
Ethan Marcotte has just relaunched his .com site and it is looking fabulously responsive as you might well expect.
The attention to detail in this site is impressive, there are quite a few different media queries to adjust and restructure the layout of the page starting with a min-width:0 however there is a heavy use of calc in the font-size, margin and padding.
Extra flexible with calc
The first law of responsive design is a flexible gridbased layout and we would achieve this by changing the pixel based widths with percentage based widths. Simple. In the beginning, however, we would still keep our margin and padding set to px, and then we started to set them as em. Now we have a better way to set both our margin and padding, as well as our font-size so that it remains as flexible as our grid.
Calc and font-size
It shouldn’t be a surprise to anyone that you need a different font-size on small screens than you do a much larger screens. Some basic assumptions are that the small screen (watches, phones, tablets) have much less space and are often viewed quite close with the added bonus that in most situations you can move the device closer and further from your face to satisfy your reading needs. The other thing you need to consider is the line length… make the text too big and it becomes difficult to read because the line lengths are so short, too small and the reader will strain to see the screen.
As the viewport/device size increases then we have the reverse. Most occasions the user will be slightly further from the screen and not have the freedom to easily change the position, and there is the danger that the line lengths begin to get really really long as we try and fill the screen making it, again, very difficult to read.
Ethan has a solution to this (he always does) where by he sets the font-size based upon a CSS calculation.
body {
font-size: calc(14px + (16 - 14) * ((100vw - 300px)/ (1400 - 300)));
max-width: 40em;
}
This effectively gives us something along the lines of this scale
| Viewport Size | font-size |
|---|---|
| 200px | 13.81818182px |
| 300px | 14px |
| 500px | 14.36363636px |
| 800px | 14.90909091px |
| 1000px | 15.27272727px |
| 1200px | 15.63636364px |
| 1600px | 16.36363636px |
If you want to get to grips with the approach check out the article by Made by Mike who came up with this approach.
And to keep everything just as fluid as the type the same approach is taken on both the margin and padding as you can see below.
margin: calc(1em + 5vh) calc(.5em + 5vw);
padding: calc(.5rem + 1vh) calc(.5rem + 2vw);
Ethan Marcotte Technical Details
Site Meta Tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Media Queries
@media (min-width:0) { }
@media (min-width:27.5em) { }
@media (min-width:34em) { }
@media (min-width:50em) { }
@media (min-width:27.5em) { }
@media (min-width:40em) { }
@media (min-width:64em) { }
@media (min-width:39.375em) { }
@media (min-width:60em) { }
@media (min-width:50em) and (max-width:74em) and (min-height:70em) { }
@media (min-width:50em) and (max-height:56.125em) { }
@media (min-width:80em) and (max-height:51em),(min-width:110em) and (min-height:65em) { }
@media (min-width:39.75em) { }
@media (min-width:39.75em) and (max-width:50em),(min-width:100em) { }
@media (min-width:50em) and (min-height:56.125em) { }
