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.
IN DEZE HANDLEIDING:
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
Min/Max breedte hoogte gebruiken in CSS width height clamp
Min/Max breedte en hoogte gebruiken in CSS Zelfs als u net begint met CSS, hebt…