Converting Pixels to Proportions
There is a mathematical formula to convert pixel based layouts to proportions.
target ÷ context = result
(This is just the formula for a percentage.)
- Target
- is the width of the element in pixels.
- Context
- is the width of the layout in pixels.
- Result
- is the percentage that the element needs to be in CSS.
Example: 25 px margin ÷ 960 px page width 25 px margin = .026 (or 2.6%)
The margin value in CSS would be listed as 2.6%
(Ben Frain)
Using Ems Instead of Pixels
Ems are based on the size of the text font. In 16 point font, it is 16 points wide.
Modern browsers use 16 px as the default size.
Therefore, these values in CSS would produce identical font sizes.
font-size: 100%;
font-size: 16px;
font-size: 1 em;
By changing the font-size to 1.5 em, the text would display at 150%, or 24px.
Note: The em can also be based on a font size you specify.
(Ben Frain)
Grid Layouts Instead of Tables
Unlike Tables, Grid Layouts create a structure that's flexible to fit different sized screens.
A Grid:- Divides up the space for organizing major regions.
- Doesn’t have a set content structure- enables wider variety of layouts.
- Combined with media queries, adapts layouts to each device.
- Intelligently reflows elements within a webpage.
- Adapts from Landscape to Portrait orientation.
- Can use grid containers similar to the box model.
For examples of grid layouts, view the whole W3C CSS3 Grid Layout article at: http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/
Fluid Layout in CSS
- Uses proportional measurements for elements (ems, and percentages).
- Uses grids or proportional columns instead of tables.
- Uses relative positioning and floats.
- Uses min and max to set limits to the flexibility.
- View my Teaching Presentation page on my website. I have also included a the link to the CSS code for my fluid layout, using proportional columns.
- http://lornabrown.org/assessments/teaching-presentation.php
- http://lornabrown.org/assessments/fluid-layout.css