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

Email: jordanm@ambientideas.com

Twitter: @ambientphoto

Online: http://www.ambientideas.com

Thank You