Wanneer je een website aan het bouwen bent met Elementor loop al snel tegen de termen PX, EM, REM, %, VW en VH aan. Alle widgets, secties en kolommen hebben laten je tussen PX, EM, REM, %, VW of VH kiezen. Maar wat betekenen die opties eigenlijk, en wanneer moet je de verschillende opties gaan kiezen en gebruiken?
De basis uitgelegd.
In CSS kan je de de grootte of lengte van elementen specificeren met behulp van verschillende maateenheden namelijk PX, EM, REM, %, VW en VH. Er zijn nog meer maateenheden beschikbaar binnen CSS, maar niet in Elementor. Het belangrijkste aspect om over de verschillende eenheden te leren, is dat sommige eenheden, zoals PX, absolute eenheden zijn en sommige relatieve eenheden.
Het verschil tussen absolute eenheden en relatieve eenheden
Absolute eenheden zijn bijvoorbeeld de PX: Pixels (px). Hoewel ze relatief zijn ten opzichte van de DPI en resolutie van het weergaveapparaat. Maar op het apparaat zelf is de PX-eenheid vast en verandert deze niet op basis van ander elementen. Het gebruik van PX kan onhandig zijn voor je website als je deze 100% responsive wilt maken. Pixels zijn wel heel handig om voor sommige elementen een consistente grootte te behouden. Als je elementen hebt waarvan het formaat niet mag worden gewijzigd (wat de schermgrootte ook is), dan is het gebruik van PX een goede keuze.
Relatieve eenheden zijn bijvoorbeeld:
EM : is het formaat ten opzichte van het bovenliggende element
REM : is het formaat ten opzichte van het root-element (HTML-tag)
% : is het formaat ten opzichte van het bovenliggende element
VW : is het formaat ten opzichte van de breedte van het kijkvenster
VH : is het formaat ten opzichte van de hoogte van het kijkvenster
In tegenstelling tot PX zijn relatieve eenheden zoals %, EM en REM beter geschikt voor responsief ontwerp en helpen ze ook om te voldoen aan toegankelijkheidsnormen. Relatieve eenheden schalen beter op verschillende apparaten omdat ze op en neer kunnen schalen op basis van de grootte van een ander element.
Wat is het verschil tussen EM en REM?
Simpel gezegd, ze verschillen op basis van overerving. Zoals gezegd is REM gebaseerd op het root-element (HTML). Elk onderliggend element dat REM gebruikt, zal dan de HTML-rootgrootte als rekenpunt gebruiken, ongeacht of een bovenliggend element al dan niet een andere grootte heeft opgegeven.
EM daarentegen is gebaseerd op de lettergrootte van het bovenliggende element. Als een bovenliggend element een andere grootte heeft dan het hoofdelement, wordt de EM-berekening gebaseerd op het bovenliggende element en niet op het hoofdelement. Dit betekent dat elementen die EM gebruiken voor dimensionering, soms een grootte kunnen worden die je niet had verwacht. Aan de andere kant geeft het je meer controle als je het nodig hebt om de grootte voor een bepaald gebied van een pagina op te geven.
Hoe zit het dan met %, VW en VH?
Terwijl PX, EM en REM voornamelijk worden gebruikt voor de grootte van lettertypen, worden %, VW en VH meestal gebruikt voor marges, opvulling, spatiëring en breedte/hoogte.
Belangrijk om te onthouden is dat VH staat voor “viewport height”, de hoogte van het zichtbare scherm. 100VH zou 100% van de hoogte van het kijkvenster moeten vullen, oftewel de volledige hoogte van het scherm. (van bijvoorbeeld je pc, tablet of mobiel) VW staat voor “viewport width”, de breedte van het zichtbare scherm. 100VW zou 100% van de breedte van de viewport vullen, dus de volledige breedte van het scherm. % geeft een percentage weer van de grootte van het bovenliggende element, ongeacht de grootte van de viewport.
Gebruik %, VW en VH bij de volgende elementen:
Kolombreedtes: als je de lay-out van een Elementor-kolom bewerkt, zal je zien dat er slechts één eenheid voor breedteafmetingen beschikbaar is: %. Kolombreedtes werken alleen goed en responsive bij het gebruik van percentages, dus er wordt door Elementor geen andere optie gegeven.
Marges: De marges van een sectie kunnen worden gespecificeerd in PX of %. Het gebruik van % heeft meestal de voorkeur om ervoor te zorgen dat de marges niet groter worden dan de inhoud bij het verkleinen van bijvoorbeeld een mobiel apparaat. Door een percentage van de breedte van het apparaat te gebruiken, blijven je marges relatief ten opzichte van de grootte van de inhoud, wat bijna altijd de voorkeur heeft.
Padding: de padding van een sectie kan worden opgegeven in PX, EM of %. Net als bij marges, heeft het vaak de voorkeur om EM of % te gebruiken, zodat de opvulling relatief blijft aan de grootte van de pagina.
Wanneer gebruik je de verschillende maateenheden?
Het is erg lastig om deze vraag perfect te beantwoorden. Over het algemeen is het vaak het beste om een van de relatieve eenheden te kiezen in plaats van PX, zodat jouw website het meest responsive is. Kies voor het gebruik van PX als je ervoor wilt zorgen dat een element nooit op een breekpunt van grootte verandert en hetzelfde blijft, ongeacht of een gebruiker een andere standaardgrootte heeft gekozen. PX-eenheden zorgen voor consistente resultaten, zelfs als dat niet ideaal is.
EM is relatief aan de lettergrootte van het bovenliggende element. Op het moment dat je de grootte van het element wilt schalen op basis van de grootte van het bovenliggende element, gebruikt je EM.
REM is relatief ten opzichte van de lettergrootte (HTML), dus als je de grootte van het element wilt schalen op basis van de hoofdgrootte, ongeacht de bovenliggende grootte, gebruikt je REM. Als je EM hebt gebruikt en problemen met de grootte ondervindt vanwege veel geneste elementen, is REM waarschijnlijk de betere keuze.
VW is handig voor het maken van elementen over de volledige breedte (100%) die de volledige breedte van het scherm zullen vullen. Je kan elk percentage van de breedte van het kijkvenster gebruiken om andere doelen te bereiken, zoals 50% voor de helft van de breedte, enz.
VH is handig voor het maken van elementen op volledige hoogte (100%) van het scherm zullen vullen. Net als bij VW kan je bepaalde percentages instellen, zoals 50% voor de helft van de hoogte, enz.
% is vergelijkbaar met VW en VH, maar het is geen lengte die relatief is ten opzichte van de breedte of hoogte van het kijkvenster. In plaats daarvan is het een percentage van de breedte of hoogte van het bovenliggende element. Percentage-eenheden zijn vaak handig om bijvoorbeeld de breedte van marges in te stellen.
Elementor geeft je dus voldoende opties en keuzes om jouw website zo responsive mogelijk te maken. De conclusie is echter dat je zelf een afweging moet maken wat in jouw geval het handigste is. Over het algemeen gebruiken we VH, VW en EM voor een zo responsive mogelijk resultaat!
