Hur möjliggör mediefrågor responsiv design?

Question

Accepted Answer

**Mediefrågor** tillämpar CSS villkorligt baserat på enhetsegenskaper — oftast **vyportens bredd** — vilket gör att ett formatmall kan anpassas till telefoner, surfplattor och skrivbordsenheter.

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## Mobil-först (min-width) vs skrivbord-först (max-width)

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**Mobil-först** (`min-width`) föredras i allmänhet: du skriver enkla basstilmallar för små skärmar, sedan progressivt lägger du till komplexitet för större. Detta tenderar att producera renare, lättare CSS och motsvarar hur innehållet flödar om.

## Andra användbara frågor

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` och `prefers-color-scheme` svarar på användarens *inställningar*, inte skärmstorlek — viktigt för tillgänglighet och tema.

## Kombinera villkor

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## En anmärkning om framtiden: behållarfrågor

Mediafrågor svarar på **vyeporten**; de nyare **behållarfrågorna** (`@container`) svarar på en *överordnad elements* storlek — bättre för verkligt återanvändbara komponenter. De kompletterar mediefrågor snarare än ersätter dem.

## Varför det är viktigt

Mediafrågor är grunden för responsiv design — anpassa layout, utrymmande och kolumner till skärmstorlek.

Tillvägagångssättet mobil-först `min-width` håller CSS hanterbar, och inställningsfrågor (`prefers-reduced-motion`, `prefers-color-scheme`) utökar responsiviteten till tillgänglighet och tema.