Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Unidades Mágicas do CSS3

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Ricardo Gouveia Ricardo Gouveia
February 27, 2016
Programming
0
56

Unidades Mágicas do CSS3

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

Avatar for Ricardo Gouveia

Ricardo Gouveia

February 27, 2016
Tweet

More Decks by Ricardo Gouveia

See All by Ricardo Gouveia
Performance Pré JS
Avatar for Ricardo Gouveia ricardogouveia3
2
110
Hexo.js & Github Pages
Avatar for Ricardo Gouveia ricardogouveia3
1
110
Diagrama de Portas (Doors Diagram)
Avatar for Ricardo Gouveia ricardogouveia3
1
49

Other Decks in Programming

See All in Programming
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
2
420
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
200
CSC307 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
690
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
21
7.3k
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
1k
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
200
CSC307 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
500
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.6k
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
140
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6.1k
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130

Featured

See All Featured
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
120
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
810
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
66
37k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
100
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
430

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

  21. None