Vad är mediafrågor?
Mediafrågor låter dig anpassa stilar till specifika enheter eller enhetsfunktioner. Vanliga exempel är skärmstorlek, orientering och upplösning.
Nyckelbegrepp
- @media screen and (max-width: ...): Definierar en mediafråga som gäller för skärmar med en maximal bredd på ett visst värde.
- MediaType: Typen av enhet, t.ex. screen eller print.
- Mediaegenskaper: Funktioner relaterade till enheten, t.ex. bredd eller orientering.
- Brytpunktsdefinitioner: Värdena som avgör när en mediafråga aktiveras.
Praktiska steg
- Definiera en mediafråga: Use @media-direktivet för att definiera vilka enheter eller funktioner mediafrågan gäller för.
- Ange CSS-egenskaper: Inuti mediafrågan anger du de CSS-egenskaper som ska tillämpas på enheter som matchar mediafrågan.
Exempel
@media screen and (max-width: 600px) {
.text-container {
font-size: 12px;
}
}
Detta exempel anger att texten ska ha en teckenstorlek på 12px på skärmar med en maximal bredd på 600px.
Förbättrad tillgänglighet för svensktalande
- Klar och koncis: Språket som används är tydligt och lättförståeligt.
- Svenska termer: Termer som "mediafrågor", "mediaegenskaper" och "brytpunktsdefinitioner" översätts till svenska för enkelhet.
- Exempel på kod: Exempelkoden är på svenska för att underlätta förståelsen.