10 min lightningtalk about CSS3 media queries

1. En kjapp innføring i hvordan
man kan ta i bruk
CSS3 media queries for å
enkelt lage mobilvennlige
Hege Røkenes
www.bennett.no
Frontend-utvikler
@bennett_tweet
@hegerokenes
facebook.com/Bennett.Reklame
hege@rokenes.com

2. Hva er media queries?
• En måte å segmentere hvilke medier CSS’en
skal gjelde på

3. Media types

4. @media screen { styles here } @media print { styles here }
<link rel=”stylesheet” <link rel=”stylesheet”
type=”text/css” type=”text/css”
media=”screen” media=”print”
href=”screen.css” /> href=”print.css” />

6. • All
• Braille
• Embossed
• Handheld
• Print
• Projection
• Screen
• Speech
• Tty
• tv

7. Media Features

8. 1. width
2. height
3. device-width
4. device-height
5. orientation
6. aspect-ratio
7. device-aspect-ratio
8. color
9. color-index
10. monochrome
11. resolution
12. scan
13. grid

9. En enkel måte å tilpasse
siden for mobil
Oppførsel og animasjonslag
JS
Presentasjonslag
CSS
Informasjonslag
HTML

10. Demo