Har du någonsin kämpat med element som du vill ha i fullhöjd eller fullbredd (dvs hela höjden/bredden på browserfönstret)? Du kanske vill göra en snygg fotosida där fotografiet tar upp hela ytan, eller kanske halva med text på sidan? Jag fick nyligen höra om en ny enhet som kallas viewport units, som kan vara väldigt användbara! Enheterna skrivs vh (viewport height) och vw (viewport width).
Se följande exempel:
Här har jag enkelt gjort en sidebar i fullhöjd bara genom följande css:
html, body {
padding: 0;
margin: 0;
}
.sidebar {
height: 100vh;
width: 20vw;
background-color: #999;
float: left;
margin-right: 50px;
}
Observera att om du har element som ligger under ett fullhöjd-element så kommer det komma en scrollbar, och fullhöjd-elementet fortsätter inte om du scrollar nedåt utan slutar vid en full skärmhöjd.
Ett exempel till:
Här har jag gjort en fotosida där fotot och texten tar upp vardera 49%, och hela höjden, css för detta:
html, body {
padding: 0;
margin: 0;
}
img.halfimg, div.halftext {
width: 49vw;
height: 100vh;
margin: 0;
padding: 0;
}
img.halfimg { float: left; }
div.halftext { float: right; }
Det bästa med dessa enheter är att de är fullständigt responsiva, och kommer alltså anpassa sig när du förstorar och förminskar fönstret. Ett tips på om du vill använda dig av fullbredd + fullhöjd på bilder är att sätta overflow:hidden på kontainerelementet eftersom man annars kan få problem med horisontella scrollbars (viewport units räknar på bredden UTAN scrollbars, och tillkommer det en vertikal scrollbar så kommer bredden bli mindre, men inte elementet med full viewport units, och därmed blir det en vertikal scrollbar för att kunna visa hela det elementet).
Kanske den mest användbara sak du kan använda dem till är för textstorlek.
Se följande exempel:
Jag har använt följande css:
h1 {
font-size: 5vw;
margin: 0;
}
Om jag nu förminskar skärmen så minskar även textstorleken!
Väldigt användbart vid responsiva designer! Och det bästa? Du kan använda det redan idag, om du inte måste stödja <IE9.
Det finns även enheterna vmin och vmax, men jag har inte hittat något bra användningsområde för dessa. Så lämna gärna en kommentar om ni har tips om detta!