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

Unidades Mágicas do CSS3

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
210
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
780
SourceGeneratorのススメ
Avatar for tkym htkym
0
200
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
140
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
310
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
220
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.4k
izumin5210のプロポーザルのネタ探し #tskaigi_msup
Avatar for izumin5210 izumin5210
1
140
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
AI & Enginnering
Avatar for codelynx codelynx
0
120
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
240

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
120
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
67
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
430
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Visualization
Avatar for Eitan Lees eitanlees
150
17k

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