What's new in Responsive Design - Rachel Andrew

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

How do we support all these
different screen sizes?

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

Flexbox responds to
the content

What does it mean to respond
to 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);
}

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

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

Responding to content in a grid
layout world

grid-template-columns: repeat(3, auto)

flex-basis: auto
repeat(3, 1fr)

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

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

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

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;
"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";
}
}

@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 the
environment your site is being used in.

Responding to the wishes of the
visitor
Media Queries Level 5 and User Preference Media Features

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

New syntax for range media
queries

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

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

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

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

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

.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-rows: subgrid;
}

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

@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?

Use new layout and image
features

Use media features and
container queries to enhance
your layout.

It’s not just about screen, or
even component, size

Responding to needs and
environment

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

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

What's new in Responsive Design - Rachel Andrew

More Related Content

Similar to What's new in Responsive Design - Rachel Andrew (20)

More from Wey Wey Web (20)

Recently uploaded (20)

What's new in Responsive Design - Rachel Andrew