Media queries

Mål

Efter kapitlet ska du kunna...

• förklara vad en media query gör
• skriva mobile first-CSS med min-width
• välja brytpunkter efter innehållet
• testa layouten i utvecklarverktygen

Viewport

Mobilen ska använda skärmens verkliga bredd

<meta name="viewport"
  content="width=device-width, initial-scale=1.0">

Raden ska ligga i dokumentets head.

Utan den kan mobilwebbläsaren använda en bredare virtuell layout.

Villkorad CSS

Vad gör en media query?

@media (min-width: 48rem) {
  /* CSS som bara gäller från 48rem */
}

Reglerna inuti blocket används bara när villkoret är sant.

Läs villkoret

min-width: 48rem

Vid 47rem är villkoret falskt. Vid 48rem och bredare är det sant.

Interaktivt villkor

När blir media queryn aktiv?

Mobile first

Börja med den lilla layouten

.layout {
  display: grid;
  gap: 1rem;
}

Grundreglerna ska fungera på liten skärm utan en media query.

Bygg vidare

Lägg till den större layouten

@media (min-width: 48rem) {
  .layout {
    grid-template-columns: 2fr 1fr;
  }
}

Från 48rem får layouten två kolumner.

Interaktiv Grid

En kolumn blir två

Breakpoint

En punkt där layouten behöver ändras

• Före brytpunkten fungerar den lilla layouten.
• Efter brytpunkten används de nya reglerna.

Välj brytpunkt

Låt innehållet bestämma

• Gör fönstret långsamt smalare.
• Stanna när innehållet blir trångt eller går sönder.
• Lägg brytpunkten där layouten behöver en ny form.

Utgå inte från en viss telefonmodell.

Responsiv navigation

Länkar i kolumn blir en rad

.site-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 44rem) {
  .site-nav { flex-direction: row; }
}

Länkarna behöver riktiga mål och en synlig fokusmarkering.

Interaktiv Flexbox

Kolumn blir rad

Vanlig ändring

Mer luft på större ytor

.section { padding: 1rem; }
@media (min-width: 48rem) {
  .section { padding: 3rem; }
}

Öka avstånd när det finns plats, men behåll ett fungerande grundläge.

Interaktiv spacing

Padding ändras vid brytpunkten

Testa

Kontrollera hela vägen mellan bredderna

• Börja omkring 320px.
• Kontrollera precis före och efter brytpunkten.
• Leta efter horisontell scrollning och överlapp.
• Kontrollera textrader och bildproportioner.
• Tabba genom navigationens alla länkar.

Utvecklarverktyg

Simulera olika bredder

1. Öppna utvecklarverktygen i Chrome.
2. Aktivera enhetsverktygsfältet.
3. Välj Responsive.
4. Dra bredden stegvis – testa inte bara färdiga mobilmodeller.

Samlad laboration

Ändra layout och brytpunkt

Kontrollfråga

När ska en breakpoint läggas?

Vid bredden för en viss telefon?

Nej. Lägg den där innehållet behöver en annan layout.

Prova själv

Bygg en mobile first-layout

1. Skapa huvudkolumn och sidokolumn.
2. Låt grundläget vara en kolumn.
3. Lägg till två kolumner med min-width.
4. Ändra fönsterbredden långsamt och justera brytpunkten.

Sammanfattning

Kom ihåg

• Media queries kör CSS när ett villkor stämmer.
• Mobile first börjar med den lilla layouten.
• min-width lägger till regler från brytpunkten och uppåt.
• Innehållets behov bestämmer brytpunkten.
• Testa alla bredder mellan smalt och brett.