Notes from CodeSchool Journey into Mobile Course

gistfile1.md

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(image@2x.png);
    -webkit-background-size: 50px 60px;
    background-size: 50px 60px;
  }
}

File-naming for retina:

logo.png at 200px
logo@2x.png at 400px