Er zijn waarden in CSS die zijn voor de verhouding van dingen in relatie tot de viewport. De viewport is de grootte van het browservenster.

Wat is vw of vh in WordPress webdesign

Ze worden viewport units genoemd, en er zijn een aantal van hen die iets anders doen. Nuttige) dingen. Een eenheid is 1% van een van de assen van het viewport. Deze kunnen nuttig zijn voor een responsief ontwerp, dat wil zeggen, het ontwerpen van websites die er goed uitzien over verschillende schermafmetingen, waarbij gebruik wordt gemaakt van de ruimte die beschikbaar is voor hen.

Er zijn veel dingen die je kunt doen met viewport units, maar laten we eens kijken naar een in het bijzonder: typografie.

Het is de moeite waard om te kijken naar onze meer recente post Simplified Fluid Typography voor praktische, geklemde, viewport-gebaseerde typografie. Dit is een handleiding met CSS voor gevorderden in WordPress.

---

Waarom is Responsive typografie belangrijk

Er zijn vele redenen. Hier zijn er twee:

• Er is zoiets als een comfortabele regellengte voor het lezen van tekst op schermen. Laten we zeggen dat het ongeveer 80 karakters zijn. Met deze eenheden kun je het perfect aanvoelen en dan heb je die ervaringsschaal op elk formaat scherm.
• Ze stellen je in staat om de maatverhouding van bijvoorbeeld een typografische koptekst en de bijbehorende inhoud strak aan elkaar te koppelen.
  Bekijk voorbeeld responsive kop

Hoe werkt vw en viewport

Een eenheid op een van de drie waarden is 1% van het kijkvenster
Als het kijkvenster 30 cm breed is, is 1vw == 0,3 cm.

Voor gebruik met font-size, denk ik dat het een “letter” is die die grootte aanneemt, maar zoals we weten, in niet-mono-spaced fonts is de breedte van een letter vrij willekeurig. Ik vind dat je gewoon de waarden moet aanpassen om het te krijgen zoals je het wilt. Dat is in principe toch wat we doen?

vw vh vmin vmax en CSS

1vw = 1% van de vensterbreedte
1vh = 1% van de vensterhoogte
1vmin = 1vw of 1vh, afhankelijk van welke kleiner is
1vmax = 1vw of 1vh, afhankelijk van welke groter is

---

<br>
h1 {<br>
font-size: 5.9vw;<br>
}<br>
h2 {<br>
font-size: 3.0vh;<br>
}<br>
p {<br>
font-size: 2vmin;<br>
}<br>

---

Meer handleidingen responsive typografie en vw vh vmin vmax

---

WordPress ontwerptraining voor gevorderden