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
70
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
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
SCSAから学ぶセキュリティ管理
masakamayama
0
140
High Performance PHP
cmuench
0
140
2.5Dモデルのすべて
yu4u
2
610
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Visualization
eitanlees
146
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
How to Ace a Technical Interview
jacobian
276
23k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Side Projects
sachag
452
42k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Adopting Sorbet at Scale
ufuk
74
9.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
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