What’s new in
Responsive Design
RACHEL ANDREW AT WEY WEY WEB. DECEMBER 2022

How do we support all thesedifferent screen sizes?

Responsive Web Design• Calculating percentages for floated layouts• Squishing images• Leaning on Media Queries

column-count: 3

Flexbox responds tothe content

display: flex

display: flex

What does it mean to respondto content?

flex-basis: auto

max-content

flex-basis: auto

Space reduced from max-content until all boxes fit

We don’t have to line
everything up.
Sometimes what we need is just to make things fit nicely.

CSS Grid
For when you do want to line everything up.

.grid {display: grid;
grid-template-columns: repeat(12, 1fr);}

repeat(12, 1fr)

.grid {display: grid;
grid-template-columns:
repeat(12, minmax(auto, 1fr));}repeat(12, 1fr)

.grid {display: grid;
grid-template-columns:
repeat(12, minmax(0, 1fr));}

repeat(12, minmax(0,1fr))

Responding to content in a gridlayout world

autogrid-template-columns: repeat(3, auto)justify-content: startrepeat(12, 1fr)

flex-basis: autorepeat(3, 1fr)

min-content, max-content, fitcontent
Directing content-based sizing

repeat(3, min-content)repeat(3, max-content)repeat(3, fit-content(400px))

max-content

400px

.media {display: grid;
grid-template-columns: fit-content(300px) 1fr;
gap: 20px;}

Media Queries

column-width: 200px

flex-wrap: wrap

repeat(auto-fill, minmax(200px, 1fr)

The first rule of Media Queries
is …
Do I need a media query?

.wrapper {display: grid;
grid-template-areas:"hd""bd""sd""ft";}@media (min-width: 600px) {.wrapper {grid-template-columns: 3fr 1fr;
grid-template-areas:"hd hd""bd sd""ft ft";}}More than just screen size
What else could we respond to?

What type of pointer do I have?

@media (pointer:coarse) {.pointer::before {content: "You have a coarse pointer";}}@media (pointer:fine) {.pointer::before {content: "You have a fine pointer";}}Can I hover?

@media (hover) {.can-i-hover::after {content: "You look like you can hover.";}}@media(hover:none) {.can-i-hover::after {content: "I don't think you can hover.";}}Testing capabilities
Check for screen size, but also pointer type and hover ability to understand theenvironment your site is being used in.

Responding to the wishes of thevisitor
Media Queries Level 5 and User Preference Media Featuresprefers-reduced-motion

@media (prefers-reduced-motion: reduce) {.animation {animation: none;}}

New syntax for range mediaqueries

@media (min-width: 600px) {.wrapper {grid-template-columns: 3fr 1fr;
grid-template-areas:"hd hd""bd sd""ft ft";}}@media (width > 600px) {.wrapper {grid-template-columns: 3fr 1fr;
grid-template-areas:"hd hd""bd sd""ft ft";}}

Container queries

.element {container-type: inline-size;}.element {container-type: inline-size;
container-name: sidebar;}

@container (min-width: 500px) {}@container sidebar (min-width: 500px) {}Subgrid

.child-grid {display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;}.main-grid {display: grid;
grid-template-columns: repeat(12,1fr);
grid-template-rows: repeat(4, minmax(150px, auto));}.child-grid {grid-column: 4 / 8;
grid-row: 2 / 4;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;}Subgrid + container queries

@container my-grid (min-width: 600px) {.item {
display: grid;
grid-template-columns: subgrid;}}

:has()li:has(h2) {}@container (min-width: 500px) {.card:has(figure+.content) {display: grid;
grid-template-columns: .8fr 1fr;
gap: 10px;}}

What does it mean to do
responsive design today?

Respond to content

Use new layout and imagefeatures

Use media features andcontainer queries to enhanceyour layout.

It’s not just about screen, oreven component, size

Responding to needs andenvironment

Don’t expect people to fix
something to use your website.
Respond to meet them wherethey are.

Thank you!
https://noti.st/rachelandrew