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

Unidades Mágicas do CSS3

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

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
48

Other Decks in Programming

See All in Programming
React 使いじゃなくても知っておきたい教養としての React
Avatar for Yuka O’oka oukayuka
18
5.1k
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
Avatar for ktr ktr_0731
0
190
11年かかって やっとVibe Codingに 時代が追いつきましたね
Avatar for yimajo yimajo
1
230
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
Avatar for shin1x1 shin1x1
1
910
構造化・自動化・ガードレール - Vibe Coding実践記 -
Avatar for ふくすけ tonegawa07
0
170
Streamlitで実現できるようになったこと、実現してくれたこと
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
2
260
DatadogのArchived LogsをSnowflakeで高速に検索する方法（Archive Searchでオワコンにならないことを祈って） / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
Avatar for Civitaspo civitaspo
0
100
Amazon Q CLI開発で学んだAIコーディングツールの使い方
Avatar for matsukada licux
3
150
Claude Code で Astro blog を Pages から Workers へ移行してみた
Avatar for Kei Kamikawa codehex
0
170
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
Avatar for teamLab teamlab
PRO
0
410
Quality Gates in the Age of Agentic Coding
Avatar for Hélio Medeiros helmedeiros
PRO
1
120
대규모 트래픽을 처리하는 프론트 개발자의 전략
Avatar for Seungmin 마량 maryang
0
110

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
65k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k

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