Unidades Mágicas do CSS3

Unidades Mágicas do CSS3 rem, vh, vw, vmin, vmax, ex,
ch

Ricardo Gouveia Q @ricardogouveia3 a

rem “root em” Tamanho relativo ao elemento-raiz (em geral <html>)

“em” <html style=“font-size: 10px;”> <body style=“font-size: 15px;”> <h1 style=“font-size: 2em;”>TEXT</h1>
</body> </html> TEXT font-size: 2 * 15px = 30px

“rem” <html style=“font-size: 10px;”> <body style=“font-size: 15px;”> <h1 style=“font-size: 2rem;”>TEXT</h1>
</body> </html> TEXT font-size: 2 * 10px = 20px

vh “viewport height” Tamanho relativo a altura da janela (exceto
quando modiﬁcado via meta viewport)

“vh” <div style=“height: 100vh;”></div> 1080px 1920px div

vw “viewport width” Tamanho relativo a largura da janela (exceto
quando modiﬁcado via meta viewport)

“vw” <div style=“width: 100vw;”></div> 1080px 1920px div

vmin “viewport min value” Relativo ao menor valor entre altura
e largura

<div style=“height: 100vmin;”></div> 600px 1920px “vmin” div 600px 1300px div
height 600px

se (height < width) { 100vmin = height; } senão
{ 100vmin = width; } “vmin”

vmax “viewport max value” Relativo ao maior valor entre altura
e largura

“vmax” <div style=“height: 100vmax;”></div> 600px 1920px div 600px 1920px div
height 1920px

“vmax” se (height > width) { 100vmax = height; }
senão { 100vmax = width; }

“uso de vmin e vmax” Quando um elemento precisa ser
sempre visível ou cobrir toda a tela 600px 1920px div 600px 1300px div height: 100vmin; width: 100vmin; height: 100vmax; width: 100vmax;

ex “font height-x” para programadores: Altura do caractere “x” ou
1/2em da fonte atual para designers: altura da fonte, excluindo ascendentes e descendentes altura x = distância entre linha de base e linha x

Altura-x “ex” } 1ex

ch “character unit” Tamanho relativo a largura do caractere “0”
na fonte atual (levando em conta font-family + font-size)

“ch” <div style=“width: 10ch; font-family: monospace;”></div> 0123456789 div 10 char

Unidades Mágicas do CSS3

Unidades Mágicas do CSS3

Ricardo Gouveia

More Decks by Ricardo Gouveia

Other Decks in Programming

Featured

Transcript