Responsive Web
Applications
with Container Queries
Slide 2
Slide 2 text
Why We Need
Container Queries
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
• No orders
• One order
• Less than one page of
orders
• Multiple pages of
orders
• Has Info Notifications
• Tab overflow
• Has Warning
Notifications
• Has limited access to
features
• Has different apps
installed
Slide 11
Slide 11 text
And now consider all of
those things for
multiple viewports
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
With media queries,
you have to know the
interplay of all objects
in all scenarios
Slide 15
Slide 15 text
Implementing
Container Queries
Slide 16
Slide 16 text
With container
queries, you only have
to know the interplay
within a single object