Hoe schrijf je een CSS-mediaquery?

@mediascherm en (min-breedte: 1000px) { }

Dit is de syntaxis van een mediaquery. Het begint met @media om de Media Query zelf op te zetten. Stel vervolgens het mediatype in, in dit geval is dit: scherm. Dit type is van toepassing op desktopcomputerschermen, tablets, telefoons, enz. Beëindig de mediaquery met de mediafunctie. In ons voorbeeld hierboven, dat is middenbreedte: 1000px. Dit betekent dat de Media Query van start gaat voor schermen met een minimale breedte van 1000 pixels breed.

Voeg na deze elementen van de mediaquery een accolade voor openen en sluiten toe, vergelijkbaar met wat u zou doen in een normale CSS-regel.

De laatste stap naar een mediaquery is het toevoegen van de CSS-regels die moeten worden toegepast nadat aan deze voorwaarde is voldaan. Voeg deze CSS-regels in tussen de accolades die deel uitmaken van de mediaquery, als volgt:

 @media scherm en (min-breedte: 1000px) { body { font-size: 20px; }

Wanneer aan de voorwaarden van de Media Query is voldaan (het browservenster is minimaal 1000 pixels breed), is deze CSS-stijl wordt van kracht en verandert de lettergrootte van onze site van de 16 pixels die we oorspronkelijk hadden vastgesteld in onze nieuwe waarde van 20 pixels. 
 Meer stijlen toevoegen 

Plaats zoveel CSS-regels binnen deze Media Query indien nodig om het visuele uiterlijk van uw website aan te passen. Als u bijvoorbeeld niet alleen de lettergrootte wilt vergroten naar 20 pixels, maar ook de kleur van alle alinea's wilt wijzigen in zwart (#000000), voegt u dit toe: 
@mediascherm en (min-breedte: 1000px) {
lichaam {
lettergrootte: 20px;
}
p {
kleur: #000000;
}
}
 Meer mediaquery's toevoegen 

Bovendien kunt u meer mediaquery's toevoegen voor elk groter formaat en deze als volgt in uw stijlenblad invoegen: 
@mediascherm en (min-breedte: 1000px) {
lichaam {
lettergrootte: 20px;
}
p {
kleur: #000000;
{
}
@mediascherm en (min-breedte: 1400px) {
lichaam {
lettergrootte: 24px;
}
}

De eerste mediaquery's beginnen met een breedte van 1000 pixels, waardoor de lettergrootte wordt gewijzigd in 20 pixels. Toen de browser eenmaal boven de 1400 pixels was, zou de lettergrootte weer veranderen in 24 pixels. Voeg zoveel mediaquery's toe als nodig zijn voor uw specifieke website. 
 Min-Breedte en Max-Breedte 

Er zijn over het algemeen twee manieren om mediaquery's te schrijven: door min-breedte of met Maximale wijdte. Tot nu toe hebben we min-breedte in actie gezien. Deze benadering activeert mediaquery's nadat een browser ten minste die minimale breedte heeft bereikt. Dus een query die gebruikmaakt van min-breedte: 1000px is van toepassing wanneer de browser minimaal 1000 pixels breed is. Deze stijl van Media Query wordt gebruikt wanneer u een site op een mobile-first manier bouwt. 

Als je gebruikt Maximale wijdte, het werkt averechts. Een mediaquery van "max-width: 1000px" is van toepassing nadat de browser onder deze grootte is gedaald. 

Citeer dit artikel.