Kap 4.4 - Media queries

Mål

• Förstå vad en media query gör.
• Skriva mobile first-CSS med min-width.
• Välja brytpunkter efter innehåll i stället för specifika telefonmodeller.
• Testa layouten med utvecklarverktyg.

Mobile first

Mobile first betyder att grundreglerna fungerar på liten skärm. Sedan lägger du till regler för större ytor.

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

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

På små skärmar hamnar innehållet i en kolumn. När viewporten är minst 48rem bred får layouten två kolumner.

Brytpunkter ska lösa problem

En breakpoint ska läggas där innehållet börjar se trångt, glest eller svårläst ut. Utgå inte från en viss mobilmodell. En ny skärmstorlek kommer alltid senare.

Vanliga saker att ändra

• Antal kolumner i en grid.
• Riktning i flexbox, till exempel kolumn på mobil och rad på större skärm.
• Avstånd runt sektioner.
• Storlek på rubriker eller bilder, gärna med clamp() som grund.

Testa i webbläsaren

Öppna utvecklarverktygen och dra viewporten smalare och bredare. Leta efter överlapp, för långa rader, bilder som spräcker layouten och menyer som inte går att använda.

Interaktivt exempel

Ändra den simulerade viewport-bredden och brytpunkten. När bredden når brytpunkten aktiveras reglerna i media queryn.

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

Prova själv

1. Bygg en layout med en huvudkolumn och en sidokolumn.
2. Låt grundläget vara en kolumn.
3. Lägg till en media query som skapar två kolumner på större skärm.
4. Testa genom att ändra fönstrets bredd långsamt.