CSS Layout - Mobile First Design

Basic of CSS relative units & mobile-first design strategy.

Transcript

1. CSS Layout Mobile-First design Heri R.
2. #0 #1 Preview What is Mobile-first? Why Mobile-first? #2 Content Coding Inspect Repeat #3 Post Conclusion Q&A, maybe?
3. #1 What? Why?
4. What is mobile-first?
5. Why mobile-first? • Target User • Website traffic stats • Faster to deliver production-ready to User • Easier to start writing the layout
6. #2 Coding + Inspect
7. Keywords #1 - Units • Font relatives units ◦ em -> current element ◦ rem -> root element ◦ ... • Viewport relatives units ◦ vh -> viewport height ◦ vw -> viewport width ◦ ... • Percent % -> parent element • calc () ??
8. Keywords #1 - Units • Font relatives units ◦ em -> current element ◦ rem -> root element ◦ ... • Viewport relatives units ◦ vh -> viewport height ◦ vw -> viewport width ◦ ... • Percent % -> parent element • calc () ??
9. Keywords #1 - Units • Font relatives units ◦ em -> current element ◦ rem -> root element ◦ ... • Viewport relatives units ◦ vh -> viewport height ◦ vw -> viewport width ◦ ... • Percent % -> parent element • calc () ??
10. Keywords #1 - Units • Font relatives units ◦ em -> current element ◦ rem -> root element ◦ ... • Viewport relatives units ◦ vh -> viewport height ◦ vw -> viewport width ◦ ... • Percent % -> parent element • calc () ??
11. Keywords #1 - Units • Font relatives units ◦ em -> current element ◦ rem -> root element ◦ ... • Viewport relatives units ◦ vh -> viewport height ◦ vw -> viewport width ◦ ... • Percent % -> parent element • calc () ??
12. Keywords #2 - Media query • Mobile-first ◦ @media (min-width: 768px) {} /* screen width 768px - 1024px */ ◦ @media (min-width: 1024px) {} /* screen width >= 1024px */ ◦ ... • Desktop-first ◦ ... ◦ @media (max-width: 1024px) {} /* screen width 768px - 1024px */ ◦ @media (max-width: 768px) {} /* screen width 0px - 768px */ ◦ ...
13. #3 So....
14. Frontend Dev & UI/UX Designer risnanto.web.id