Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Layout - Mobile First Design
Search
Heri Risnanto
April 22, 2020
Technology
0
71
CSS Layout - Mobile First Design
Basic of CSS relative units & mobile-first design strategy.
Heri Risnanto
April 22, 2020
Tweet
Share
Other Decks in Technology
See All in Technology
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
20k
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
210
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.8k
怖くない!はじめてのClaude Code
shinya337
0
390
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
180
AWS認定を取る中で感じたこと
siromi
1
180
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
6.7k
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
130
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
140
ゼロからはじめる採用広報
yutadayo
3
830
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Gamification - CAS2011
davidbonilla
81
5.4k
Embracing the Ebb and Flow
colly
86
4.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Into the Great Unknown - MozCon
thekraken
40
1.9k
How to Ace a Technical Interview
jacobian
277
23k
Rails Girls Zürich Keynote
gr2m
95
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Agile that works and the tools we love
rasmusluckow
329
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Transcript
CSS Layout Mobile-First design Heri R.
#0 #1 Preview What is Mobile-first? Why Mobile-first? #2 Content
Coding Inspect Repeat #3 Post Conclusion Q&A, maybe?
#1 What? Why?
What is mobile-first?
Why mobile-first? • Target User • Website traffic stats •
Faster to deliver production-ready to User • Easier to start writing the layout
#2 Coding + Inspect
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 () ??
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 () ??
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 () ??
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 () ??
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 () ??
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 */ ◦ ...
#3 So....
Frontend Dev & UI/UX Designer risnanto.web.id