The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated...
Transcript of The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated...
![Page 1: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/1.jpg)
The Evolution of Responsive Design
RACHEL ANDREW AT FRONT END NORTH 2020
![Page 2: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/2.jpg)
How do we support all these different screen sizes?
![Page 3: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/3.jpg)
![Page 4: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/4.jpg)
Fluid Gridshttps://alistapart.com/article/fluidgrids/
![Page 5: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/5.jpg)
![Page 6: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/6.jpg)
![Page 7: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/7.jpg)
target ÷ context = result
![Page 8: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/8.jpg)
Flexible Imageshttps://alistapart.com/article/fluid-images/
![Page 9: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/9.jpg)
max-width: 100%
![Page 10: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/10.jpg)
Media QueriesHow big is this viewport?
![Page 11: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/11.jpg)
Responsive Web Design
• Calculating percentages for floated layouts• Squishing images• Leaning on Media Queries
![Page 12: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/12.jpg)
column-count: 3
![Page 13: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/13.jpg)
Flexbox responds to the content
![Page 14: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/14.jpg)
display: flex
![Page 15: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/15.jpg)
display: flex
![Page 16: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/16.jpg)
Flexbox is one-dimensional
![Page 17: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/17.jpg)
flex-wrap: wrap
![Page 18: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/18.jpg)
flex: 0 0 32%
![Page 19: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/19.jpg)
What does it mean to respond to content?
![Page 20: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/20.jpg)
flex-basis: auto
max-content
![Page 21: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/21.jpg)
flex-basis: auto
Space reduced from max-content until all boxes fit
![Page 22: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/22.jpg)
We don’t have to line everything up.Sometimes what we need is just to make things fit nicely.
![Page 23: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/23.jpg)
CSS GridFor when you do want to line everything up.
![Page 24: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/24.jpg)
.grid {display: grid;grid-template-columns: repeat(12, 1fr);
}
![Page 25: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/25.jpg)
repeat(12, 1fr)
![Page 26: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/26.jpg)
.grid {display: grid;grid-template-columns:repeat(12, minmax(auto, 1fr));
}
![Page 27: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/27.jpg)
repeat(12, 1fr)
![Page 28: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/28.jpg)
.grid {display: grid;grid-template-columns:repeat(12, minmax(0, 1fr));
}
![Page 29: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/29.jpg)
repeat(12, minmax(0,1fr))
![Page 30: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/30.jpg)
Responding to content in a grid layout world
![Page 31: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/31.jpg)
auto
![Page 32: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/32.jpg)
grid-template-columns: repeat(3, auto)
![Page 33: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/33.jpg)
justify-content: start
![Page 34: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/34.jpg)
repeat(12, 1fr)
![Page 35: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/35.jpg)
flex-basis: auto
repeat(3, 1fr)
![Page 36: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/36.jpg)
min-content, max-content, fit-contentDirecting content-based sizing
![Page 37: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/37.jpg)
repeat(3, min-content)
![Page 38: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/38.jpg)
repeat(3, max-content)
![Page 39: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/39.jpg)
repeat(3, fit-content(400px))
max-content 400px
![Page 40: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/40.jpg)
.media {
display: grid;
grid-template-columns: fit-content(300px) 1fr;
gap: 20px;
}
![Page 41: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/41.jpg)
![Page 42: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/42.jpg)
Flexible imagesMore than just max-width: 100%
![Page 43: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/43.jpg)
Responsive Images
![Page 44: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/44.jpg)
Solving the janky images problemMapping HTML attributes width and height to an aspect ratio.
![Page 45: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/45.jpg)
It’s time to start using the width and height attributes on the <img> element again
![Page 46: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/46.jpg)
![Page 47: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/47.jpg)
Media Queries
![Page 48: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/48.jpg)
column-width: 200px
![Page 49: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/49.jpg)
flex-wrap: wrap
![Page 50: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/50.jpg)
repeat(auto-fill, minmax(200px, 1fr)
![Page 51: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/51.jpg)
The first rule of Media Queries is …Do I need a media query?
![Page 52: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/52.jpg)
.wrapper {
display: grid;
grid-template-areas:
"hd"
"bd"
"sd"
"ft";
}
![Page 53: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/53.jpg)
![Page 54: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/54.jpg)
@media (min-width: 600px) {
.wrapper {
grid-template-columns: 3fr 1fr;
grid-template-areas:
"hd hd"
"bd sd"
"ft ft";
}
}
![Page 55: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/55.jpg)
![Page 56: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/56.jpg)
More than just screen sizeWhat else could we respond to?
![Page 57: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/57.jpg)
What type of pointer do I have?
![Page 58: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/58.jpg)
@media (pointer:coarse) {
.pointer::before {
content: "You have a coarse pointer";
}
}
@media (pointer:fine) {
.pointer::before {
content: "You have a fine pointer";
}
}
![Page 59: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/59.jpg)
Can I hover?
![Page 60: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/60.jpg)
@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.";
}
}
![Page 61: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/61.jpg)
@media (any-pointer:coarse) {
.any-pointer::before {
content: "One of your pointers is coarse. Your device has a touchscreen, though you might notbe using it.";
}
}
![Page 62: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/62.jpg)
![Page 63: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/63.jpg)
”
“Designing a page that relies on hovering or accurate pointing only because any-hover or any-pointer indicate that at least one of the available input mechanisms has these capabilities is likely to result in a poor experience.
Media Queries Level 4https://drafts.csswg.org/mediaqueries-4/#any-input
![Page 64: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/64.jpg)
Testing capabilities Check for screen size, but also pointer type and hover ability to understand the environment your site is being used in.
![Page 65: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/65.jpg)
Overflow detectionDisplay Quality Media Queries
![Page 66: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/66.jpg)
@media (overflow-block: paged) {
/* CSS for paged media */
}
![Page 67: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/67.jpg)
Responding to the wishes of the visitorMedia Queries Level 5 and User Preference Media Features
![Page 68: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/68.jpg)
prefers-reduced-motion
![Page 69: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/69.jpg)
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}
![Page 70: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/70.jpg)
prefers-color-scheme
![Page 71: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/71.jpg)
@media (prefers-color-scheme: dark) {
body {
background: #333;
color: white;
}
}
![Page 72: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/72.jpg)
prefers-reduced-data
![Page 73: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/73.jpg)
@media (prefers-reduced-data: reduce) {
/* CSS loading in smaller images */
}
![Page 74: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/74.jpg)
Feature QueriesWhat does this browser support?
![Page 75: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/75.jpg)
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
![Page 76: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/76.jpg)
What does it mean to do responsive design today?
![Page 77: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/77.jpg)
Respond to content
![Page 78: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/78.jpg)
Use new layout and image features
![Page 79: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/79.jpg)
Use media features toenhance your site.
![Page 80: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/80.jpg)
It’s not about screen size
![Page 81: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/81.jpg)
Responding to needs and environment
![Page 82: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/82.jpg)
Stop expecting people to fixsomething to use your website. Respond to meetthem where they are.
![Page 83: The Evolution of Responsive Design · Responsive Web Design • Calculating percentages for floated layouts ... Responding to content in a grid layout world. auto. grid-template-columns:](https://reader033.fdocuments.in/reader033/viewer/2022050514/5f9e341793727c7e532922da/html5/thumbnails/83.jpg)
Thank you!https://noti.st/rachelandrew