CodeSchool - Journey into Mobile

http://mobileweb.codeschool.com

Tools

http://responsv.com/flexible-math

Flexible Math

target / context = result
ex. 30px / 10px = 3em

Flexible Typesetting

html {
  font-size: 16px;
}

body {
  font-size: 62.5%; /* 1 em = 10px */
}

Media Queries

media screen and (max-width: 320px) {
  
}

note: width of viewport is <= 320px (mobile:portrait)

media screen and (max-width: 480px) {
  
}

note: width of viewport is <= 480px (mobile:landscape)

media screen and (min-width: 1024px) {
  
}

note: width of viewport is >= 1024px (desktop)

Responsive Media

Set media elements to 100%:

img,
embed,
object,
video {
  max-width: 100%;
}

Adjust for retina displays:

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  logo {
    background-image: url([email protected]);
    -webkit-background-size: 50px 60px;
    background-size: 50px 60px;
  }
}

File-naming for retina:

logo.png at 200px
[email protected] at 400px