Media Query i 2019

Media queries er som bekendt CSS-funktionalitet, der gør det muligt at specificere hvilke styles, der skal anvendes i forhold til f.eks. skærmstørrelsen på brugerens enhed. På den måde kan indholdet flyttes rundt og “stackes” på en måde, så brugeren altid får den bedste oplevelse.

Det var nordmanden, Håkon Wium Lie, medstifter af Piratpartiet i Norge, med meget mere, der i en banebrydende phd-afdeling fra 1994 introducerede konceptet for, ikke bare media queries, men CSS i det hele taget. Det tog 18 år før media queries i 2012 blev W3C anbefalet og efterhånden nød fuld browser support.

Centralt i media queries er breakpoints, der sætter betingelserne for, hvornår og hvilken styling, der skal effektueres:

background-color:green;
 
@media only screen and (min-width: 400px) and (max-width: 640px)  {
  background-color: red;
}

I dette tilfælde er baggrundfarven sat til grøn, med mindre skærmbredden er mellem 400px og 640px, i hvilket tilfælde baggrundfarven sættes til rød. 400px og 640px er valgte breakpoints. 

Det er efterhånden blevet et moderne mantra, at breakpoints skal følge indholdet og ikke devices. Indhold skal ombrydes, når det er naturligt at ombryde det, uanset hvilke enheder brugerne ser indholdet på. Det lyder meget fornuftigt, men hvis virkeligheden er, at der i mængden af tilgående devices er nogle markante breakpoint, f.eks. 768px, så er det måske ikke det mest hensigtsmæssigt at indholdet ombrydes naturligt ved 800px. Mon  ikke de fleste kender til oplevelsen af at havne på en webside, hvor man lige præcis er havnet på den forkerte side af en ombrydning. Derfor er det nyttigt i det mindste er være orienteret om, hvordan brugernes skærmopløsning i almindelighed fordeler sig.

Statcounter Globalstats giver et statistisk indblik i, hvorledes det står til med skærmopløsningen på de enheder, der tilgår internettet i Danmark i februar 2019.

Oversigten indikerer, at der stadigvæk er god fornuft i et klassisk valg af breakpoints, som f.eks:

//Small
@media only screen and (max-width: 640px) { } 
// Medium 
@media only screen and (min-width: 641px) { } 
@media only screen and (min-width: 641px) and (max-width: 1024px) { } 
// Large 
@media only screen and (min-width: 1025px) { } 
@media only screen and (min-width: 1025px) and (max-width: 1440px) { } 
// XLarge
@media only screen and (min-width: 1441px) { } 

Opdelingen giver en forholdsvis jævn fordeling af brugere, og selv om udbuddet af devices kostant øges, så rummer denne klassifikation i det store hele stadig en opdeling mellem mobil (small), tables (medium) og desktop (large, xlarge).

 Sass/Scss kan det f.eks gøres således:

$screen: "only screen" !default;
$small-only: "#{$screen} and (max-width: 640px)" !default;
$medium-up: "#{$screen} and (min-width:641px)" !default;
$medium-only: "#{$screen} and (min-width:641px) and (max-width:1024px)" !default;
$large-up: "#{$screen} and (min-width:1025px)" !default;
$large-only: "#{$screen} and (min-width:1025px) and (max-width:1440px)" !default;
$xlarge-up: "#{$screen} and (min-width:1441px)" !default;

Hvorefter media queries let kan anvendes:

.icon {
  position: absolute;
  font-size: 18px;
  @media #{$medium-up} {
      font-size: 25px;
  }

matchMedia og MediaQueryList

Er der behov for ikke blot at sætte CSS, men også ekserkvere javascript, kan det være nyttigt at erindre eksistensen af window.matchMedia og MediaQueryList: