Recommendations


Layout which automatically adapts to



Varying screen sizes
Varying resolution
Varying aspect ratios





Games
Magazines
News and Book Readers
Social Media
And much more…
Applications to consider:
320
px
768px
Smartphone
1920px
1024px
Portrait
1366px
Landscape
Monitor
Example of adaptive layout change based on orientation
Example of adaptive layout change based on size
Desired Effect
Without CSS Rich
Layout Properties and
Styles
With CSS Rich Layout
Properties and Styles
in Internet Explorer 10
Aspect Ratio
Dependency
Lots of JavaScript Code
@media (orientation: …)
Grid type positioning
Possible use of tables
(but no content and style
separation)
Grid
Automatic content reflow
from column to column
Table and Lots of
JavaScript
Multi-column
Automatic centering and
positioning
Possible use of floats
and JavaScript
Flexbox
Proportionate Positioning Lots of JavaScript
Use of advance
positioning (such as
fractions, etc.)
Summary
Layer
Module to use
Layout Selection
Media Queries
Page Layout
Block Layout
CSS3 Grids
CSS3 Flexbox
CSS3 Multi-column
Multi-column
Landscape
Flexbox
(vertical)
Flexbox (vertical)
Grid
Flexbox (horizontal)
Multicolumn
Portrait
Landscape layout selected with Media Queries
Grid
Flexbox
Multicolumn
Flexbox
Portrait layout selected with Media Queries
Flexbox
Grid
Multi-column
@media
Queries
Grid
Flexbox
Multicolumn
• Apply selective styling based on display properties such
as resolution and orientation (pick device family)
• @media (orientation: landscape) { … }
• Container property: display: –ms-grid
• Fluid Grid
• Page layout for targeted device family
• Container property: display: –ms-box
• Vertical or horizontal positioning of child elements
• Control of stacking and space distribution
• Container property: column-width: 200px
• Used to flow text between columns as with newspaper or
magazine layouts
• Column stacking of any content
http://ie.microsoft.com/testdrive/Info/Downloads/De
fault.html
www.ietestdrive.com
http://channel9.msdn.com/events/mix/mix11/htm11
http://blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platformpreview-and-css-features-for-adaptive-layouts.aspx
http://www.w3.org/TR/css3-mediaqueries/
http://www.w3.org/TR/css3-flexbox/
http://dev.w3.org/csswg/css3-grid-align/
http://www.w3.org/TR/css3-multicol/