Size does matter - Responsive Design in 2019

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