Upload
ambientphoto
View
830
Download
1
Tags:
Embed Size (px)
Citation preview
Media Queries& Kick Start for Mobile
by Jordan McCullough
CSS3 Lightning Talk
Preparing for Mobile
Liquid Layout
Proportional Sizing
Percent dimensions for block elements
navigation{ width: 100%; }content{ width: 80%; float: left}aside{ width: 20%; float: left}
h1 { font-size: 2.3em }p { font-size: 1em }article{ font-size: .9em}
Proportional EMs for font sizes
#logo { background: url(logo.png);
}
Maximize use of background images
Retooling the HTML Viewport
Layout Viewport
VisualViewport
Layout Viewport
VisualViewport
{<meta name=”viewport” content=”width=device-width”>
As web developers, we only care about how
content will fitin the device’s screen size
<meta name="viewport"
content="width=device-width,
maximum-scale=1">
Optional:initial-scale=1,
user-scalable=no
Force browser to report width the same
as device width
Viewport Objectives
Establish expected widths for content✓
Override default reported size on mobiles✓
Constrain user zooming and scaling✓
The Media Query
@media only all and [(media feature)]
@media only all and [(media feature)]
@media only all and [(media feature)]
@media only all and [(media feature)]
@media only all and [(media feature)]
@media only all and [(media feature)]
(width: 500px)(min-width: 300px)
and (max-width: 500px)
and (device-pixel-ratio: 2)
Device Pixel Ratio
1 2 3 4 5 6 7 8
Device Pixels
CSS Pixels
1 2 3 4
ImageA.png
ImageA.png
device-pixel-ratio > 1
device-pixel-ratio == 1
What happens if...
Minimize image downloads per platform
Maximize use of high pixel density displays
@media only all and (min-device-pixel-ratio: 2){
#myBackground{background: url(bg.png);background-size: 50% 50%;
}}
Separate stylesheet for high density displays
Produce images scales by pixel-ratio
Write CSS-to-device px compensation
✓
✓
✓
Best Practices
Best Practices
Keep platform rules in
separate stylesheets#1
Best Practices
Apply media query features to value ranges using min- and max-
#2
Best Practices
Supply a core stylesheet that
maintains appearance that is
independent of media queries#3