Transcript
In CSS zijn er verschillende soorten units (eenheden). Net zoals je in het echte leven volume wilt uitdrukken, bijvoorbeeld water. Dat kan een liter zijn of milileters. Of gewicht kan bijvoorbeeld kg of grams zijn of een ons. CSS units gaan vooral over lengte, dus bijvoorbeeld de breedte of hoogte van een element. Dat kan je in een eenheid uitdrukken. Laten we er een paar bekijken.
Hier heb ik een vierkantje, laten we de grootte hiervan aanpassen.
- px; Ik kan bijvoorbeeld zeggen die is 200px hoog. Of 400px hoog. Het nadeel is dat px niet zo schaalbaar zijn. Ze zijn niet relatief dus 'schalen' moeilijk.
- em; relatief tot de font-size (letter m) je kan er ongeveer vanuit gaan dat 1em 16px is. dus 2em is 32px. em wordt complex als je er meerdere gebruikt. Dus stel ik zet op de body 2em. Dan is dat dubbel zo groot dus 32px. als ik dan op een ander element 2em zet is die 64px niet 32px.
- %; bijvoorbeeld 200% of 50% de helft.
- vh en vw; zijn heel erg tof. Die zijn voor de viewport. Dus bijvoorbeeld je wilt iets de helft van het scherm maken. Of de volledige breedte en hoogte van een scherm.
Dat zijn waarschijnlijk de meeste voorkomende units die je in je css gaat gebruiken.