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
OPENLOGI Company Profile
hr01
0
67k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
250
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
190
ビギナーであり続ける/beginning
ikuodanaka
3
740
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
180
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
250
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
怖くない!はじめてのClaude Code
shinya337
0
390
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
110
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
270
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Automating Front-end Workflow
addyosmani
1370
200k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
How GitHub (no longer) Works
holman
314
140k
We Have a Design System, Now What?
morganepeng
53
7.7k
Unsuck your backbone
ammeep
671
58k
Music & Morning Musume
bryan
46
6.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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