Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Unidades Mágicas do CSS3

Avatar for Ricardo Gouveia Ricardo Gouveia
February 27, 2016
Programming
62
0

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

More Decks by Ricardo Gouveia

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

Other Decks in Programming

See All in Programming
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
Avatar for mpyw mpyw
0
360
Starting & Sustaining Code-Based E2E Testing for Non-Coding QA Teams( #jasstniigata )
Avatar for teyamagu teyamagu
PRO
1
340
すこし踏み込む CancellationToken
Avatar for tkym htkym
0
310
変化を抱擁するドキュメントの作り方 - ビジネスルール駆動開発がもたらす、コードとの新しい関係
Avatar for ioki ioki
2
210
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
5
3.2k
Building an Out-of-Order CPU
Avatar for Latte72 latte72
1
780
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
290
AIエージェント時代のコードレビューを設計する
Avatar for nogu nogu66
6
2.7k
ゲームコントローラやキーボードのファームウェアをSwiftで書く
Avatar for Kishikawa Katsumi kishikawakatsumi
1
240
AHC070解法紹介
Avatar for eijirou eijirou
0
120
AI に Inclusive UI を書かせよう — Design Rules Skill で Compose UI を作り直す
Avatar for テオリア・テクノロジーズ theoriatec2024
1
490
iOSDC Japan 2026 - Swiftで作って学ぼう！データベース自作入門
Avatar for kaseken (Kent Kaseda) kaseken
2
170

Featured

See All Featured
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
464
34k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
380
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
700
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
330
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
280
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
290
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
1
610
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
540
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k

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