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
地方企業がクラウドを活用するヒント
miu_crescent
PRO
1
130
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
510
AIプロダクト開発から得られた知見 - 2025年1月版
takaakikakei
0
180
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
200
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
640
Autify Company Deck
autifyhq
2
41k
FastConnect の冗長性
ocise
1
9.4k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
640
What's New in OpenShift 4.18
redhatlivestreaming
0
930
DeepSeek on AWS
hariby
1
200
Postman Vaultを使った秘密情報の安全な管理
nagix
3
230
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
140
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Code Reviewing Like a Champion
maltzj
521
39k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Faster Mobile Websites
deanohume
306
31k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
620
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
For a Future-Friendly Web
brad_frost
176
9.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
Building Your Own Lightsaber
phodgson
104
6.2k
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