Next up,
we're going to learn how we actually make responsiveness happen.
How do we change the size of text, for example, on really small screens?
How do we go from a five
to a four to a three column layout depending on the size of the screen?
The answer is that we use something called media queries.
So media queries
allow us to write specific styles and grouped those styles together
so that they only apply at certain conditions.
And usually those conditions are based upon
the maximum or minimum width of the viewport.
So what exactly is the viewport?
The viewport is basically whatever is visible in your browser
minus the browser UI.
So you know this box in the middle, not the scroll bar, not the nav bar,
not the address bar, not the bottom scrollbar,
just the content area in your browser window.
And that can be super wide.
So in this example, you know, if we look at Airbnb,
the viewport is all of the Airbnb content, you can see,
but it's still not the same as the the window size itself, right?
It's not the size of the whole screen.
In this case, the viewport is much smaller than the whole screen.
And if I open up the dev tools, that's also going to impact the viewport.
It's shrinking it vertically. Now.
Or if I move this over,
it's shrinking it horizontally.
So there's a bunch of things that impact the viewport,
you know, the size of the window, any dev tools that are open.
But at the end of the day, the viewport refers to this area.
So we're going to write media queries that work with the size,
typically the width of the viewport, so not the width of the whole screen
or the whole window, but whatever is the visible area.
And those two can be different, although a lot of the time they're the same.
Okay, so back to media queries.
They are would allow us to write styles and group styles together
so that they only apply during certain conditions.
And again, most commonly it's a condition based upon
the maximum or minimum width of the viewport.
Here's the way that we write a media query.
The first thing you need to know is they all start with at media
and we're going to address the only and the screen and all of that in just a bit.
But they all start with that media and there's actually a simpler
one that we can write that doesn't involve all the stuff you see here.
I'm going to show that to you first.
But again, they all start with that media.
That's how we tell the browser.
That's how we write CCed that says this is a media query.
And then we follow up with different properties.
So let's try our very first most basic media query.
I have an empty HTML file.
I'll put an H1 in here that says media queries queries
I've linked to indexed access
and let's make the body
have a background color of red.
Here it is, our beautiful red background color.
So now what we'll do is write our first basic media query.
It looks like this add media
and then I'm going to write men with or match with.
It's up to me.
We'll talk about the difference and let's pick a width like 800 pixels.
And then we write curly braces.
And this on its own won't do anything.
It's not going to change our styles.
What we then do is put our styles, our selectors and styles inside,
and whatever styles are in here will only apply when this is true.
So with this basically saying at media, this is a media query, that's what
that keyword means. This is a media query.
This in parentheses says Styles in between these curly braces
should apply up to the maximum width of 800 pixels.
So then I can write.
All right, background color, you become cyan.
Okay.
And when I refresh the page, nothing has changed.
But that means my window is greater than 800 pixels.
This says maximum width of 800.
This applies meaning everything below.
So I'll keep shrinking it until I hit 800 pixels.
And there it is right about there.
So everything below is cyan
and then we hit red because we go above 800 pixels.
And if I open up the devtools, ah, pop it out into a separate window right there.
You can see it might be tiny,
but you can see the size of the screen right there, 811 pixels.
792. So it's right there at 800
where it shifts and everything above that will have a background color of red.
So that's our first simplest example.
And I could reverse this and say min width of 800 pixels
and take a moment to think about what to expect when I refresh the page.
This is saying the body should always be red.
That's just our normal styles.
And then we revise it and say Actually, here's a media query
that says at a minimum width of 800 pixels.
The body should be saying, so this means 800 and above it becomes cyan.
And I'll scroll, shrink it down
until we hit 800 and it will revert to red.
So it starts out red.
That's the default state.
But then this comes in and says, Nope, if you're above 800 pixels,
you're now cyan.
So we have those two options min width and max width,
and we can have multiple media queries.
So I'll show one more example.
Let's go from saying maybe we'll go in the order of the rainbow.
So it starts as red, and then once you hit 800 pixels, you become orange
and then we can pick another bigger how about 1200 pixels you become yellow.
So here I'm saying the default state is red
and then at a minimum width of 800 pixels and above it's orange.
But hang on a minute, at a minimum width of 1200 pixels and above it's yellow.
And that means we're going to start at red.
Then I'll hit 800 right here we become orange.
We the body does.
And then I hit 1200 and it changes to yellow
right there.
And I can keep adding on as many as I want.
We're going to learn a lot more about media queries with Min, with Max, with
some of the fancier, newer media queries.
But this is our super quick introduction to the syntax.
They all start with that media and then some criteria.
And in this case it's the minimum width of the screen in pixels.
This an above minimum width of 1200 pixels
and above you become yellow and you've probably already noticed this.
What makes it all work is that any styles that we apply in
a media query are immediately considered more specific.
It's not really specific. It's not specificity.
But they fall higher in the cascade compared to regular styles.
So both of these could be applying at the same time, right?
If my screen is right here, let's even go just to the orange.
It's 872 pixels.
The normal styles say that the background color of the body should be red.
But then this special case says, Nope, the background color should be orange.
And the only way this works is if this wins.
Otherwise, we'd never be able to write media queries, right?
We'd never be able to make
responsive sites where things change, or at least it'd be pretty hard to do.
So there is a difference in how this is treated.
This is higher in the cascade compared to this, even though it's the same selector.
We have a lot more to learn, but that's our first introduction.