Responsiv webdesign – definere media queries i CSS3

Responsiv webdesign med HTML5 og CSS3. Logo.Jeg har tidligere skrevet om media typer i CSS for å for eksempel kunne skille mellom layout/formatering på skjerm og utskrift. I CSS3 har vi imidlertid fått et nytt valg som gjør det enda enklere å tilpasse en side, ikke til media-typer, men til skjermoppløsning og portrett/landskapsmodus m.m. Dette kalles Media Queries og er nøkkelen til responsiv webdesign (klikk her for en oversikt over våre kurs innen HTML5, CSS3 og responsiv webdesign).

Med media queries har vi mulighet til å lage CSS som retter seg inn mot f.eks en minimum eller maksimum skjermoppløsning. På denne måten kan vi spesifikt gjøre endringer på CSS avhengig av skjermoppløsningen. Det er altså media queries som er selve nøkkelen til responsiv webdesign.

Hvordan definere media queries, nøkkelen til responsiv webdesign?

Å opprette media queries kan vi gjøre på ulike måter.

  • separate CSS-filer for hver media querie.
  • inndeling i 1 CSS-fil.
  • ved hjelp av @import.

annonse

Separate CSS-filer

Det er mulig å skille media queries i ulike CSS-filer slik som vist nedenfor. En fordel med dette kan være at vedlikeholdet forenkles siden koden er delt inn i ulike filer.

En ulempe ved å  bruke denne metoden er at vi må koble flere CSS-filer til HTML-siden, noe som vil påvirke hastigheten på siden.

I eksempelet nedenfor ser du hvordan dette gjøres både om du velger mobile first eller desktop first.

1 CSS-fil

Det er også mulig å samle alle media queries i en og samme CSS-fil. Dette vil være fornuftig hvis vi tenker på hastighet, men kan i noen tilfeller være litt mer krevende å vedlikeholde, da filen blir større (mer kode) og potensielt vanskeligere å navigere i.

I eksempelet nedenfor ser du hvordan dette gjøres både om du velger mobile first eller desktop first.

@import

Et tredje alternativ er å bruke @import. Bruker du @import kan du ha separate CSS-filer (slik som i punkt 1), men disse importeres inn i en «hoved» CSS-fil, som så kobles til HTML-dokumentet. Denne metoden vil heller ikke være optimal hva gjelder hastighet, men i motsetning til punkt 1 (separate CSS-filer) vil du slippe flere linker i HTML-dokumentet da alt importeres i 1 CSS-fil. Dette vil potensielt være enklere å vedlikeholde.

I eksempelet nedenfor ser du hvordan dette gjøres både om du velger mobile first eller desktop first.

Del: