om responsief webdesign te implementeren, is het belangrijk om media-query’ s in CSS te begrijpen, vooral Media-only en media-screen query ‘ s.

laten we beginnen met de voor de hand liggende vraag.

Wat is een media query?

een media query is een techniek die werd geïntroduceerd in CSS3. De query omvat het gebruik van de @ media-regel om een blok van CSS-eigenschappen uit te voeren in het geval dat een vooraf bepaalde voorwaarde Waar is.

bijvoorbeeld, de onderstaande code bepaalt dat als het browservenster 400px of minder is, de achtergrondkleur lichtgroen zal zijn:

@Media only screen en (max-width: 400px) {
body {
Background-color: lightgreen;
}
}

Media queries zijn vooral handig bij het toevoegen van breekpunten voor responsief ontwerp. Omdat breekpunten in wezen pixelnummers zijn waarbij de inhoud of het ontwerp anders wordt weergegeven dan de gebruikers, worden mediaquery ‘ s gebruikt om te bepalen welke veranderingen moeten plaatsvinden bij welke pixels.

in het voorbeeld hieronder geeft de code aan dat als het browservenster kleiner is dan 600px, elke kolombreedte 100% moet worden:

/ * Voor desktop: * /
.kol-1 {breedte: 8,33%;}
.kol-2 {breedte: 16.66%;}
.kol-3 {Breedte: 25%;}
.kol-4 {breedte: 33,33%;}
.kol-5 {breedte: 41.66%;}
.kol-6 {breedte: 50%;}
.kol-7 {breedte: 58.33%;}
.kol-8 {breedte: 66,66%;}
.kol-9 {breedte: 75%;}
.kol-10 {breedte: 83,33%;}
.kol-11 {breedte: 91.66%;}
.kol-12 {width: 100%;}

@media only scherm en (max-width: 600px) {
/*voor mobiele telefoons: * /
{
Breedte: 100%;
}
}

elke mediaquery bestaat uit een optioneel mediatype en een of meer mediafunctie-expressies. Het is mogelijk om meerdere media queries te combineren met logische operators. Alle media queries zijn hoofdlettergevoelig.

elke mediaquery wordt als true beschouwd wanneer het opgegeven mediatype overeenkomt met de apparaten waarop de website wordt weergegeven. Daarnaast moeten de mediafunctie-expressies ook waar zijn.

Wat is de media-scherm query?

de @media screen query betekent gewoon dat de query in kwestie is bedoeld voor de kleurenschermen of apparaten die een “scherm” – modus ondersteunen.

laten we een voorbeeld nemen:

@media screen and (max-width:500px)

de bovenstaande query is van toepassing op schermen met een maximale breedte van 500 pixels. Het doel hiervan is vooral om de code te richten op het onderscheid tussen ‘scherm’ en andere media (zoals print, braille, reliëf, handheld, enz.).

Wat is de query met alleen media?

door de logische operator ‘only’ toe te voegen aan de media query, zorgt de ontwikkelaar ervoor dat de query alleen wordt toegepast als de volledige voorwaarde overeenkomt. Als u niet alleen gebruikt, kunnen oudere browsers niet alle mediafunctie-expressies lezen of interpreteren. Als de query bijvoorbeeld

@media screen is en (max-width:500px)

oudere browsers kunnen de query interpreteren als alleen scherm en het aantal pixels negeren. Dit zou leiden tot de toepassing van de query voorwaarde op alle schermen. Om dit te voorkomen kunt u het volgende gebruiken:

@media only screen en (max-width:500px)

Als u de enige operator gebruikt, moet u het mediatype opgeven.

betekenis in responsief ontwerp

mediaquery ‘ s zijn essentieel bij het implementeren van responsief webdesign. De hierboven besproken queries zijn twee van de meest gebruikte en zijn nuttig in ervoor te zorgen dat uw website inhoud is geoptimaliseerd voor apparaat maten en types.

zodra u CSS-query ‘ s op uw website hebt gebruikt, moet u de effectiviteit ervan controleren. De eenvoudigste manier om dit te doen is om een tool waarmee u uw website ontwerp te testen op echte apparaten en browsers te gebruiken. Er zijn meerdere tools om dit te vergemakkelijken,maar neem de tijd om een responsieve checker online die u de mogelijkheid om te testen op een voldoende grote verscheidenheid van apparaten-zowel desktop en mobiel.