Let’s start with the summary of the Ethan Marcotte’s article about Fluid Grids. Ethan shows how to transform a pixel-based layout in a percentage-based layout. Here are the main points:
• "The design had to be fluid and resize with the browser window."
• Using em
We take the target value for each element’s font-size in pixels and divide it by the font-size of its container (that is, its context). We’re left with the desired font-size, expressed in relative, em-friendly terms.
target / context = result
If we assume the body’s default type size to be 16px, we can plug each desired font-sizevalue 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.
If we could treat font sizes not as pixels, but as proportions measured against their container, we could do the same with the different elements draped across our grid.
We can use the same proportional analysis to transform pixel-based column widths into percentage-based, flexible measurements. So we’re working from a target value of 700px for the page’s title — but it’s contained within a designed width of 988px.
As a result, we simply divide 700px (the target) by 988px (the context) like so: 700 ÷ 988 = 0.7085. And there it is: 0.7085 translates into 70.85%, a width we can drop directly into our stylesheet.
target / context = result
If we assume the body’s default type size to be 16px, we can plug each desired font-sizevalue 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.
If we could treat font sizes not as pixels, but as proportions measured against their container, we could do the same with the different elements draped across our grid.
We can use the same proportional analysis to transform pixel-based column widths into percentage-based, flexible measurements. So we’re working from a target value of 700px for the page’s title — but it’s contained within a designed width of 988px.
As a result, we simply divide 700px (the target) by 988px (the context) like so: 700 ÷ 988 = 0.7085. And there it is: 0.7085 translates into 70.85%, a width we can drop directly into our stylesheet.
I tried to summarize another good article of Ethan Marcotte, about Responsive Web Design, – that I indicated in last post –, but there are several important information and examples, so I think the better option is to read it completely.
Different CSS files according to screen resolution
In Ethan Marcotte's articles you read about media queries but if you want, instead of using media queries to adjust layout for all devices, you can use the Adapt JavaScript to set which CSS file should be loaded according to the screen size. This link provides the JS file and examples of how it works.
Another important links
• W3C Documentation about CSS for mobile
• W3C Mobile web best practices
No comments:
Post a Comment