Highly Effective and Maintainable CSS Media Queries
19
Journey to Highly Effective and Maintainable CSS Media Queries
-
Upload
kaloyan-kosev -
Category
Software
-
view
66 -
download
1
Transcript of Highly Effective and Maintainable CSS Media Queries
Journey to Highly Effective
and Maintainable
CSS Media Queries
Agenda
1. Intro
2. Where to place them?
3. Maintainable @media query definitions
4. PX vs EM vs REM, which is the best?
5. Choosing the most effective breakpoints
6. Mobile-first?!
Intro
Where to place @media?
Approach #1
Approach #2
Abstraction!
PX vs EM vs REM
Choosing the main Breakpoints! (phone, tablet, laptop, desktop)
Approach #1: Most popular screen resolutions in the world!
Approach #2: Copy Bootstrap or Foundation!
Approach #3: Your website visitors most popular screen resolutions!
2 main breakpoints: 768px (tablet) & 1024px
(desktop)
Content breaks: at 900px.
Solution #2: Introduce a new breakpoint!(hm, we don’t stick to the main breakpoints for something so general as … our main content)
Issue
Solution #1: Stick to the existing breakpoints!
(but the content is actually okay between 768px to 899px range)
Breakpoints should be content-based,not device based!
Breakpoints (major) and Tweakpoints (minor)
Mobile-first?!
Use-case
60% 40%
Mobile first!
Desktop first...
Device Width is not the limit!
Follow-up
#2: Blog post (Medium).
#3: StackOverflow Threads.
#1: Feedback.
