Hoe schrijf je een CSS-mediaquery?

Ken de syntaxis voor mediaquery's met zowel minimale als maximale breedte

Responsief webdesign is een benadering voor het bouwen van webpagina's waarbij die pagina's hun lay-out en uiterlijk dynamisch kunnen veranderen op basis van de schermgrootte van een bezoeker . Grote schermen krijgen een lay-out die geschikt is voor die grotere schermen, terwijl kleinere apparaten, zoals mobiele telefoons, dezelfde website krijgen die is opgemaakt op een manier die geschikt is voor dat kleinere scherm. Deze aanpak biedt een betere gebruikerservaring voor alle gebruikers en kan zelfs helpen zoekmachine rankings verbeteren . CSS-mediaquery's vormen een belangrijk onderdeel van responsive webdesign.

Mediaquery's zijn als kleine voorwaardelijke instructies in het CSS-bestand van uw website, waardoor u bepaalde CSS-regels kunt instellen die pas van kracht worden als aan een bepaalde voorwaarde is voldaan, zoals wanneer een schermgrootte boven of onder bepaalde drempels is.

Mediaquery's zijn nu standaard, maar zeer oude versies van Internet Explorer ondersteunen ze niet.

Mediaquery's in actie

Begin met een goed gestructureerdeHTML-documentvrij van visuele stijlen.

Stijl de pagina in uw CSS-bestand en stel een basislijn in voor hoe de website eruit zal zien. Om de lettergrootte van de pagina 16 pixels te laten zijn, schrijft u dit: CSS :

|__+_|

Meer mediaquery's toevoegen

Bovendien kunt u meer mediaquery's toevoegen voor elk groter formaat en deze als volgt in uw stijlenblad invoegen:

|__+_|

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 gebruik te maken van 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 gebruik maakt 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.