Detecteer browserafmetingen met CSS3

Wanneer we vierkant beginnen in de wereld van reagerend ontwerp het is belangrijk om te weten wat de nieuwe regels van CSS3, dit helpt ons om de afmetingen van het scherm te detecteren waarop de website of applicatie wordt bekeken.
Een van deze regels is: @voor de helft, die ons met de juiste combinatie van voorwaarden in staat stelt om de grootte van het scherm als zodanig te kennen en, afhankelijk van het resultaat, de relevante acties met betrekking tot het ontwerp te ondernemen.

Mediaquery's gebruiken

Laten we een code maken HTML eenvoudig en daar gaan we onze stylesheet opnemen, die de regels voor onze . zal bevatten gemeen willen, laten we kijken:

 Schermafmetingen detecteren 

Zoals we kunnen zien, is het een vrij eenvoudige code, maar er zijn verschillende dingen om te benadrukken. De eerste is ingesloten in de labels stijl, daar hebben we twee regels, de eerste geeft aan dat van 600 pixels de achtergrondkleur van onze tekst op het etiket h1 Het verandert in blauw, laten we eens kijken wanneer we het formaat wijzigen in de browser en deze wijziging wordt van kracht:

De tweede regel geeft aan dat als de maximale breedte is 400 pixels de achtergrondkleur van de tekst verandert in rood, wat een derde voorwaarde aangeeft, aangezien alles onder de 400 pixels rood zal zijn en boven de 600 blauw, dus van 401 tot 599 pixels zal de kleur standaard wit blijven, laten we eens kijken:

Ten slotte, als we het scherm van onze browser veel meer verkleinen, zullen we de regel voor onze rode achtergrondkleur invoeren, laten we eens kijken hoe het eruit ziet:

We zien dan dat het detecteren van de afmetingen van onze browser een uiterst eenvoudige taak is dankzij CSS3, iets dat uiterst nuttig is wanneer we werken met responsieve ontwerpen en we de afmetingen van de browser van de gebruiker moeten kennen om stijlen toe te passen die ervoor zorgen dat onze website er goed uitziet op elk apparaat en met een bestaande schermresolutie.