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
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
990
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
2
560
GCASアップデート(202506-202508)
techniczna
0
220
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
7.3k
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
1
210
Mackerel in さくらのクラウド
cubicdaiya
1
370
工業高校で学習したとあるエンジニアのキャリアの話
shirayanagiryuji
0
120
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
120
いま、あらためて考えてみるアカウント管理 with IaC / Account management with IaC
kohbis
2
520
ECS モニタリング手法大整理
yendoooo
1
100
文字列の並び順 / String Collation
tmtms
1
120
kintone開発チームの紹介
cybozuinsideout
PRO
0
73k
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
What's in a price? How to price your products and services
michaelherold
246
12k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The Cult of Friendly URLs
andyhume
79
6.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Typedesign – Prime Four
hannesfritz
42
2.8k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Facilitating Awesome Meetings
lara
55
6.5k
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