Introduksjon av noen mekanismer
Meta
En typisk angivelse av viewport er slik:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Der vi angir at bredden som siden vår skal forholde seg til er bredden på den enheten siden lastes på, og at siden initielt skal ha en zoom på 1.0 (ingen zoom). Mange forfattere anser at denne meta-taggen bør angis på alle websider. Det er flere angivelser som kan brukes.
CSS
Hele CSS-beskrivelsen må selvsagt ta hensyn til hvordan vi lager en foranderlig, responsive, layout. Det er noen selectorer som er spesielt inrettet på å ta vare på skjermens orentering (landcscape, portrait) og størrelse. På samme måte som vi kan skrive et stilsett for forskjellige media:
@media screen{
.menu{display:block;}
}
@media print{
.menu{display:none;}
}
Kan vi skrive, f.eks:
@media (min-width:500){
.menu{ display:block; }
}
Eller vi kan kombinere betingelser og ta hensyn til orientering:
@media (min-width:500) and (orientation: landscape){
.menu{ display:block; }
}
Eller slik for en betinget tilkopling av et helt stilsett
<link rel="stylesheet" media="(min-width: 500px)" href="one.css" />
Events
Vi må i mange tilfeller kunne plukke opp andre begivenheter enn mouseclick. Vi må reagere på touch-begivenheter. Dette er mulig men er av og til litt infløkt. De viktige begivenhetene er:
- touchstart
- touchend
- touchcancel
- touchmove
Vi må dessuten kanskje ta hensyn til flere touch-events samtidig dersom vi skal la brukeren bruke flere fingre
Vi kan også plukke opp når en enhet skifter orentering:
- orientationchange
Fonter
Handtering av fonter og fontstørresle er et gjennomgående tema i layout, ikke bare når det gjelder responsive design. Min erfaring er at det er ganske effektivt å bruke relative fontstørrelser, altså bruke em eller % i stedet for px. F.eks. slik:
body{font-size: 16px;}
p{ font-size:1em}
.myHeader{ font-size:2em}
Mer om dette f.eks hos Kyle Schaeffer [2]
Bilder
Her ligger det noen utfordringer dersom vi ønsker å tilpasse størrelse(KB), utstrekning eller rett og slett alternative bilder avhenig av den enheten som skal vise dem. Muligetene er mange:
- Vi kan sette bredde og høyde via stilsettet
- Vi kan legge bildene som bakgrunn i f.eks. et div-element, og derved controllere vilket bilde vi skal bruke med stilsettet
- Vi kan bruke srcset attributten i img-elementet for å angi alternative bilder avhengig av tilgjengelig bredde
- Vi kan bruke picture-elementet.
Det er i øyeblikket varierende support hos forskjellige enheter når det gjelder de to siste løsningene og det skal til noen litt kompliserte vurderinger for å få alle detaljer riktig. Se f.eks. A List Apart [3]
