$30 off During Our Annual Pro Sale. View Details »

Size does matter - Responsive Design in 2019

Nils
March 27, 2019
Technology
0
54

Size does matter - Responsive Design in 2019

Nils

March 27, 2019
Tweet

More Decks by Nils

See All by Nils
History of Art vs. Web Design vs CSS Development
enbee81
1
48
How Studying History Of Arts Helped Me Become A Better Frontend Designer
enbee81
0
45
Variable Units
enbee81
0
31
History of Art and modern CSS
enbee81
0
200
Size does matter - Responsive Design in 2019 - V2
enbee81
0
150

Other Decks in Technology

See All in Technology
EMになって半年でやったこと
yuu26
0
330
承認を意識したコードレビュー
buntafujikawa
0
180
電子証明書でデバイス認証を強化せよ
matsujirushi
0
130
OCI Streaming ご紹介
oracle4engineer
PRO
0
550
Code Graphology
fr0gger
0
130
runnによるAPIのシナリオテストの導入と自動化 / stac2022
k1low
4
1k
バンドルカードの クレジットカード決済システムの 泥臭い運用
hiroakis
7
5.1k
Best Practices for Applications on Kubernetes to Achieve Both Frequent Updates and Stability
hhiroshell
2
120
C#11 による世界最速バイナリシリアライザー「MemoryPack」の作り方
neuecc
0
810
ソフトウェアアーキテクチャ・ハードパーツ
suchi
0
130
Make time count with Wear OS 🤖⌚️
moyheen
3
180
Adopting Jetpack Compose in your Android app - DevFest 2022
patilshreyas
0
420

Featured

See All Featured
Code Reviewing Like a Champion
maltzj
508
38k
Fantastic passwords and where to find them - at NoRuKo
philnash
31
1.8k
Bash Introduction
62gerente
600
210k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
175
8.9k
The Art of Programming - Codeland 2020
erikaheidi
35
11k
Testing 201, or: Great Expectations
jmmastey
24
5.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
1.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
3
500
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
The Mythical Team-Month
searls
210
40k
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Happy Clients
brianwarren
89
5.8k

Transcript

  1. SIZE DOES MATTER… …Responsive Design in 2019

  2. NILS BINDER @supreme-being @nilsbinder

  3. 800x600

  4. 1024x768

  5. 1280x1024 1024

  6. 1280x1024 1200

  7. 320x480

  8. 1440x900

  9. 3440x1440 1000 1000 1440

  10. 4096x2048 1440

  11. 1440x900

  12. None
  13. None
  14. None
  15. None

  16. Die Qual der Wahl… px % em rem vw/vh vmin/vmax

    ch fr -keine-

  17. Die Qual der Wahl… px rem vw/vh vmin/vmax % fr

    em ch -keine-

  18. html { font-size: 10px; } .teaser { width: 320px; }

    P { font-size: 1.8rem; line-height: 2.4rem; }
  19. None

  20. html { font-size: 10px; } .teaser { width: 320px; }

    P { font-size: 1.8rem; line-height: 2.4rem; }

  21. html { font-size: 100%; } .teaser { width: 320px; }

    P { font-size: 1.8rem; line-height: 2.4rem; }

  22. html { font-size: 100%; } .teaser { font-size: 1rem; width:

    20em; } P { font-size: 1.8rem; line-height: 2.4rem; }

  23. html { font-size: 100%; } .teaser { font-size: 1rem; width:

    20em; } P { font-size: 1.125em; line-height: 1.333; }
  24. None
  25. None

  26. Grid-Header

  27. Grid-Header

  28. Grid-Header

  29. None
  30. None
  31. None
  32. None
  33. None

  34. Visit https://ruhrjs.de

  35. None