En kjapp innføring i hvordan man kan ta i bruk

CSS3 media queries for å enkelt lage mobilvennlige

Hege RøkenesFrontend-utvikler@hegerokeneshege@rokenes.com

www.bennett.no@bennett_tweet

facebook.com/Bennett.Reklame

Hva er media queries?

• En måte å segmentere hvilke medier CSS’enskal gjelde på

Media types

@media print { styles here }

<link rel=”stylesheet” type=”text/css” media=”print” href=”print.css” />

@media screen { styles here }

<link rel=”stylesheet” type=”text/css” media=”screen” href=”screen.css” />

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

Media Features

1. width2. height3. device-width4. device-height5. orientation6. aspect-ratio7. device-aspect-ratio8. color9. color-index10. monochrome11. resolution12. scan13. grid

En enkel måte å tilpasse siden for mobil

InformasjonslagHTML

PresentasjonslagCSS

Oppførsel og animasjonslagJS

Demo