MediaQueries

Vad är en Media Query?

En Media Query är en CSS-regel som används för att anpassa en webbplats utseende baserat på egenskaper hos enheten som visar webbplatsen. Dessa egenskaper kan inkludera:

• Medietyp (t.ex. skärm, tryck, mobil)
• Skärmstorlek (t.ex. bredd, höjd)
• Orientering (t.ex. porträtt, landskap)
• Upplösning (t.ex. pixel per tum)

Hur använder jag Media Queries?

För att använda Media Queries, lägg till @media-regeln i ditt CSS-blad och ange de egenskaper du vill matcha:

@media (min-width: 768px) {
  /* Styles som gäller för enheter med en bredd på minst 768px */
}

Exempel

Följande CSS-exempel anpassar webbplatsens stilar för olika skärmstorlekar:

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

Tips för tillgänglighet och användarvänlighet

• Använd relativa enheter: Använd em, rem och % istället för px för att göra dina stilar skalbara till olika skärmstorlekar.
• Testa på olika enheter: Kontrollera att din webbplats ser bra ut på olika enheter, inklusive skrivbord, surfplattor och mobiltelefoner.
• Tillhandahåll alternativ: Ge användare alternativ för att anpassa webbplatsens utseende efter deras preferenser, t.ex. färgteman och teckensnittsstorlekar.