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.

Kontrollera viewport-inställningen

En responsiv sida behöver följande rad i dokumentets head:

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

Raden gör att sidans bredd följer enhetens skärm. Utan den kan en mobilwebbläsare använda en bredare virtuell layout, vilket gör media queries svårare att bedöma.

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.

Exempel: responsiv navigation

På en liten skärm kan länkarna ligga i en kolumn. När det finns mer plats kan samma navigation byta till en rad.

<nav class="site-nav">
    <a href="#start">Start</a>
    <a href="#activities">Aktiviteter</a>
    <a href="#contact">Kontakt</a>
</nav>

.site-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

Länkarna behöver riktiga href-mål och ska fortfarande ha en synlig fokusmarkering när användaren navigerar med Tab.

Från HTML-struktur till layout

HTML beskriver sidans delar. CSS väljer sedan vilka behållare som ska använda flexbox eller grid.

<header>
    <h1>Hundklubben</h1>
    <nav class="site-nav">...</nav>
</header>

<main>
    <section class="hero">...</section>
    <section class="cards">
        <article>...</article>
        <article>...</article>
    </section>
</main>

<footer id="contact">...</footer>

Här kan .site-nav använda flexbox och .cards använda grid. Varje layoutbehållare styr sina egna direkta barn.

Testa i webbläsaren

Öppna utvecklarverktygen och dra viewporten smalare och bredare. Testa inte bara några färdiga enhetsmodeller.

• Testa en smal bredd omkring 320px.
• Dra långsamt över varje brytpunkt och kontrollera precis före och efter.
• Leta efter horisontell scroll, överlapp och för långa textrader.
• Kontrollera att bilder inte spräcker layouten eller ändrar proportioner.
• Tabba genom navigationen och kontrollera att alla länkar 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.