Hoe Media Queries in CSS gebruiken voor responsief ontwerp?

CSS is een van de fundamentele pijlers van webontwikkeling en -ontwerp. Terwijl CSS begon als iets dat de stijl van een webpagina kan veranderen, brengt elke iteratie van de CSS-specificatie nu meer op tafel, juist als het gaat om cross-browser compatibiliteit.

Vandaag de dag is CSS meer dan alleen “achtergrondkleur” en tag-specificaties die de eerste dagen van webontwikkeling leuk maakten. CSS is een hulpmiddel geworden om zonder al te veel moeite mobile-first design en responsive web design in webapplicaties te brengen.

In deze post duiken we diep in het concept van media queries in CSS: een eigenschap van CSS die de webpagina kan aanpassen door naar het apparaat te kijken. We zullen ook zien hoe alles is geëvolueerd en verder focussen op hoe we de responsive design CSS media queries kunnen implementeren om een naadloze gebruikerservaring voor uw website te ontwikkelen.

Nieuw bij CSS Selectors? Bekijk deze Ultimate CSS Selector cheat sheet om uw webdesign carrière een boost te geven.

Wat zijn media queries in CSS

De media-queries in CSS begonnen met de CSS2-specificatie die de CSS-media-regel opnam in zijn bibliotheek. Media regels werden geïntroduceerd in de CSS na het observeren van de verschillende media apparaten die de markt overspoelden en goed werden ontvangen door de gebruikers.

Het was bijvoorbeeld een spannende tijd toen er spraakapparaten werden geïntroduceerd die de webpagina voor je konden lezen. Maar helaas, ook al waren media-regels belangrijk, ze maakten geen indruk op vele ontwikkelaars. Een sterke reden was dat media-apparaten nog niet klaar waren voor een dergelijke transformatie (althans tot dan toe!).

CSS Media Queries in 2024

Dus gingen de ontwikkelaars van CSS verder en dachten na over een wijziging van deze eigenschap. Hoewel mediaregels niet werkten in de gemeenschap, kunnen ze queries introduceren die een media-apparaat kunnen analyseren en dienovereenkomstig CSS toepassen. Deze werden CSS media queries genoemd.

Zoals we weten, hebben media queries in CSS de manier veranderd waarop we tegenwoordig een responsieve web app ontwikkelen. CSS media queries zijn voorwaarden en queries die perfect werken in dit tijdperk van honderden apparaten en browsers.

Terwijl mediaregels keken naar een smartphone, keken CSS media queries naar de viewport, resolutie en oriëntatie.

Deze media queries in CSS gaven een unieke mogelijkheid om de inhoud te renderen volgens het apparaattype of de oriëntatie ervan, wat ons naar de volgende stap in responsive web design bracht. De verandering waar CSS-ontwikkelaars aan dachten werd goed ontvangen en werd een integraal onderdeel van webdesign met behulp van CSS media queries.

Hoe schrijf je media queries in CSS voor Responsive design?

De syntaxis voor media queries in CSS lijkt op TestNG annotaties, wat je als beginnende webontwikkelaar een beetje uniek zult vinden.

De media query kan als volgt worden geïmplementeerd door het woord “media”. Als voorbeeld:

@media only screen and (max-width: 680px) {
  /* jouw CSS */
}

Deze media query zoekt naar schermen (“only screen” zoals geschreven) met een max-width van 680px. Als het er een vindt, worden de voorwaarden uitgevoerd, en worden de wijzigingen aangebracht in de HTML-code.

Meer voorbeelden media-queries

@media only screen and (min-width: 768px) {
  p { 
font-size: 18px;
line-height: 1.6em;
}
}
@media only screen and (min-width: 920px) {
  p { 
font-size: 20px;
line-height: 1.6em;
}
}

media-queries en print

Om alleen het mediatype toe te passen en niet de media-queries, worden de volgende waarden aanvaard:

@media print {
   .h2 {
 font-size: 24px
   }
}

De bovenstaande query zal de inhoud met de klassenaam h2 heading een font-size van 24 pixels geven wanneer de pagina moet worden afgedrukt.

Regels voor media-eigenschappen

Om responsiviteit via onze webapplicatie te bereiken, moeten we weten hoe groot het apparaat moet zijn om specifieke inhoud weer te geven. Media feature rules helpen ons daarbij. We kunnen onze specifieke voorwaarde identificeren met media-eigenschappen en CSS dienovereenkomstig implementeren. Hoewel er veel media-eigenschap regels zijn, zullen we slechts een paar belangrijke ervan voor responsief ontwerp bespreken.

Breedte en hoogte media-eigenschap regels

De eerste media-eigenschap regel om te overwegen is het controleren van de breedte en hoogte van de viewport. Breedte bewerkingen kunnen worden gecontroleerd met de “width” eigenschap, “max-width”, en “min-width” eigenschappen voor knelpunten.

Voorbeeld van max-width media feature regel:

@media screen and (max-width: 840px){
  p {
 color: green;
}
}

Oriëntatie in CSS media queries

De oriëntatie van een apparaat is een van de belangrijkste problemen die de responsiviteit van uw website verstoren. Responsiviteit kan nooit worden bereikt als de webapplicatie de oriëntatie niet kan begrijpen en dienovereenkomstig kan reageren. Net als bij media queries kan het kennen van de oriëntatie van het apparaat helpen om de inhoud anders te organiseren, wat resulteert in meer responsiviteit.

De oriëntatie mediaregel kan worden toegepast als het volgende voorbeeld:

@media (orientation: landscape){
          p {
            color: red;
            font-size: 30px;
          }
        }

Connectoren in mediaregels

Vaak is slechts één mediaregel niet voldoende om responsiviteit te bereiken. Wat als we de mediaregel willen implementeren op specifieke apparaten en met specifieke voorwaarden? Voor dergelijke vereisten maken we gebruik van connectors (logische) in mediaregels. De connectors nemen drie waarden aan in CSS media queries:

• and
• or
• not

Deze connectoren hebben dezelfde betekenis als in booleaanse expressies en programmeertalen. Om de “en” connector toe te passen, zal de volgende code je helpen:

@media (orientation: landscape) and (min-width: 1080px){
          p {
            color: red;
            font-size: 40px;
          }
        }

Responsive Breakpoints en zijn methoden

De post, tot nu toe, toont ons hoe responsief webdesign te bereiken met behulp van media queries in CSS, regels en expressies. Het is leuk om elementen te controleren en ze te zien transformeren volgens onze wensen. Maar het probleem is hoe te beslissen op welk punt we die media regels willen toepassen op de elementen? 640px of 1080px of iets anders? Dit getal dat werkt als een reflectiepunt wordt een breekpunt genoemd wanneer de media queries worden uitgevoerd.

Het kiezen van willekeurige breekpunten is een slechte responsive design strategie en mag nooit zonder analyse worden toegepast. Raadpleeg onze handleidingen over CSS-breekpunten voor responsive design om meer te weten te komen over breekpunten.

Media queries samengevat

Media queries in CSS zijn een nuttige hulp bij het opbouwen van een responsief ontwerp en het ontwikkelen met meer controle en uitbreidingsmogelijkheden. Media queries in CSS zijn weliswaar ruw begonnen, maar worden tegenwoordig volop gebruikt in projecten en webapplicaties. U kunt dit CSS spiekbriefje volgen om uw CSS-vaardigheden op te frissen.

Deze post belichtte de belangrijkste doelen van media queries in CSS en hoe je met behulp van verschillende regels en expressies responsiviteit kunt bereiken. Het verbaast me om zulke mooie ontwerpen te zien op Codepen en andere websites die ontwikkelaars bouwen met minimale bibliotheekondersteuning.

Aan het eind van de post doen we een oproep voor dergelijke ontwerpen in de commentaarsecties en we zouden graag de beste daarvan in deze post opnemen. Ik hoop creatief werk te zien!

Veel gestelde vragen (FAQ’s)

Wat is een media query in CSS?

De media queries in CSS zijn handig om websites en apps aan te passen op basis van het apparaattype of een specifiek kenmerk, zoals de schermgrootte of viewportbreedte.

Kun je media-query’s in CSS gebruiken?

Hoewel media-queries meestal worden geassocieerd met CSS, kunnen ze ook worden gebruikt in HTML en JavaScript. U kunt media queries ook rechtstreeks in HTML gebruiken.

Meer handleidingen media queries en responsive webdesign