Media query

Vi kan jobba med media queries för att bättre kontrollera när brytpunkterna sker, det kan ge oss bättre kontroll över den responsiva designen.

Med flexbox wrap får vi en enkel och automatisk beräkning, men ibland ger det oss inte tillräckligt med kontroll. Låt se hur vi kan använda media queries för att förbättra layouten ytterligare.

Vad är en media query?

En media query är en CSS-teknik som gör det möjligt att tillämpa olika stilar beroende på egenskaper hos enheten som visar innehållet, såsom skärmstorlek, upplösning eller orientering.

Genom att använda media queries kan vi skapa en responsiv design som anpassar sig till olika skärmstorlekar och enheter, vilket förbättrar användarupplevelsen.

Media queries används ofta för att ändra layouten, storleken på text och bilder, eller andra visuella element beroende på skärmstorleken.

Syntax för media queries

Media queries skrivs i CSS med följande syntax:

@media (condition) {
  /* CSS rules to apply when the condition is true */
}

Där condition är ett villkor som specificerar när de inneslutna CSS-reglerna ska tillämpas. Villkoret kan baseras på olika egenskaper hos enheten, såsom skärmstorlek, upplösning eller orientering.

Stäng av flexbox wrap

För att bättre kunna se effekten av media queries så tar vi bort flex-wrap: wrap; från vår CSS för .row .cols-3. Då kommer kolumnerna alltid att ligga på samma rad och inte staplas automatiskt.

Lägg till följande regel i din stylesheet.

/* Remove wrapping for 3-column layout */
.row.cols-3 {
  flex-wrap: nowrap;
}

När du laddar om din sida i webbläsaren så kommer du att se att kolumnerna i raden med tre kolumner inte längre staplas när sidan blir smalare. Istället kommer de att krympa och eventuellt gå utanför skärmen.

Image description — Bild: Nu stackas ej raden med tre kolumner.

Exempel på media queries

Vi kan använda media queries för att ändra layouten från 3 kolumner till 2 kolumner när skärmen är smalare än 800px, och till 1 kolumn när skärmen är smalare än 600px. Till det behöver vi två media queries.

Media query för 800px

Vi börjar med regeln som har brytpunkten vid 800px. Här tänker vi att den sista kolumnen får stackas och ta hela sidans bredd. Det kan vi göra genom att använda flex-wrap, men först när sidans bredd är mindre än (max-width) 800px.

@media (max-width: 800px) {
  .row.cols-3 { flex-wrap: wrap; }
}

Laddar vi om sidan kan det se ut så här.

Media query för 600px

Vi fortsätter med en brytpunkt vid 600px. Här tänker vi att alla kolumner skall stackas och ta hela sidans bredd. Det kan vi göra genom att ge varje kolumn en flex-basis på 100%.

@media (max-width: 600px) {
  .cols-3 .card { flex: 1 1 100%; }
}

Laddar vi om sidan kan det se ut så här.

Media query eller flexbox wrap?

Både media queries och flexbox wrap är användbara tekniker för att skapa responsiva layouter. Valet mellan dem beror på dina specifika behov och den kontroll du vill ha över layouten.

Flexbox wrap är enklare att implementera och fungerar bra för grundläggande responsivitet där kolumner automatiskt staplas när de inte får plats på samma rad.
Media queries ger mer kontroll och flexibilitet, vilket gör det möjligt att anpassa layouten vid specifika brytpunkter och skapa mer komplexa responsiva designmönster.

I praktiken används ofta en kombination av båda teknikerna för att uppnå önskad responsiv design.