Unidades Mágicas do CSS3

Apresentação de algumas unidades que, apesar de muito úteis, são pouco conhecidas.

Transcript

1. Unidades Mágicas do CSS3 rem, vh, vw, vmin, vmax, ex, ch
2. Ricardo Gouveia Q @ricardogouveia3 a
3. rem “root em” Tamanho relativo ao elemento-raiz (em geral <html>)
4. “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
5. “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
6. vh “viewport height” Tamanho relativo a altura da janela (exceto quando modificado via meta viewport)
7. “vh” <div style=“height: 100vh;”></div> 1080px 1920px div
8. vw “viewport width” Tamanho relativo a largura da janela (exceto quando modificado via meta viewport)
9. “vw” <div style=“width: 100vw;”></div> 1080px 1920px div
10. vmin “viewport min value” Relativo ao menor valor entre altura e largura
11. <div style=“height: 100vmin;”></div> 600px 1920px “vmin” div 600px 1300px div height 600px
12. se (height < width) { 100vmin = height; } senão { 100vmin = width; } “vmin”
13. vmax “viewport max value” Relativo ao maior valor entre altura e largura
14. “vmax” <div style=“height: 100vmax;”></div> 600px 1920px div 600px 1920px div height 1920px
15. “vmax” se (height > width) { 100vmax = height; } senão { 100vmax = width; }
16. “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;
17. 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
18. Altura-x “ex” } 1ex
19. ch “character unit” Tamanho relativo a largura do caractere “0” na fonte atual (levando em conta font-family + font-size)
20. “ch” <div style=“width: 10ch; font-family: monospace;”></div> 0123456789 div 10 char