Responsive web design
is all about media queries.
A media query is a CSS code,
so code you add to your CSS file which can look like this.
You simply add this in a new line in your CSS code
and start with @media.
This tells the browser that we have a media query here,
meaning we want to gather information or query information
about the media type, so the device type
and its specifications
the person browsing our website is using.
And if this device type meets certain criteria,
then that code we define in this media query
should be executed.
These criteria are right here in this red part,
either the min width or the max width, so either of the two,
I'll dive into these in a few seconds, but the width here
refers to the screen width so basically the resolution
of the screen the user's device has.
And then when you find such a min or max width,
right here for example, I used atomic value of 1,200 pixels.
This pixel value here refers to the device width.
So the width of our screen
where this media query becomes active.
You are of course not limited to pixels here,
you can also use em or rem.
In the course, we'll mainly focus on to rem right here,
because if the user adjusts the font size,
then adjusting the breaking points according to this
font size change typically makes a lot of sense.
Once this criteria is fulfilled, as I said,
we'll dive deeper into the max or min width
in a few seconds, then certain CSS rules
should be valid and executed.
Here I added a single selector, the paragraph,
just as an example.
And inside this paragraph, we only have the font size
as property that we want to change in the media query.
In practice, you can of course also add multiple selectors
and multiple properties for the specific selectors
in the media query.
So that's the idea.
You write the media query, you tell the browser
at which device with this media query should be executed,
and then, well, you add the code that should be executed
if this query becomes active.
Now, what about this min width and max width though?
Well, min width and max width are again related
to the desktop-first or mobile-first approach
that we are using when creating the website.
If you created a desktop-first website like we did,
we will use the max width keyword in here.
Why the max width?
Well, think about the logic we have
when creating this website.
We start with the large screen, with the desktop screen,
and want to adjust our code downwards
towards smaller device screens.
This means starting from the current code base,
we want to add certain break points,
which could for example be right here at 1,200 pixels
as defined above in the example, and if we are on a device
with a maximum width of 1,200 pixels or below,
then the code defined in this media query
should be executed.
So in simple words this means, for large screens,
I want to have a font size of three rem for example,
if the screen the user has is only at a maximum
1,200 pixels wide, then two rem are sufficient for me.
As I said, you can of course add different break points
and multiple CSS properties and values in there.
You can also add multiple media queries.
For example, we could set a second break point
for a maximum width of 768 pixels.
So this means we again start from our current
maximum screen width and say, okay,
going down to a maximum width of 1,200 pixels,
I want to have certain rules to be applied,
and if we go further down to 768 pixels,
then I want to have another font size, 135 from here,
just to give you an example.
So this is the max width keyword
for the desktop-first design.
For mobile-first, things are different,
here, we use the min width.
Again, because a different logic is applied right here.
We created the code for our entire website mobile-first,
so we start from the smaller device and now want
to adjust our code to make sure the page layout
also looks good on bigger devices.
Therefore, we tell our browser here with the min width
for media query that once our screen hits a certain width,
for example, 768 pixels or more, then, well,
a different font size, a different color,
a different layout, whatever, you can't change,
basically your entire CSS code should be applied.
As for the desktop-first design, also for mobile-first
with the min width, we can of course also add
multiple break points.
Here for example, again, the break point
at 1,200 pixels or more.
But that's important to understand.
In the desktop-first example with max width,
our break points min 1,200 pixels or less,
768 pixels or less, so this is when this code is executed.
For min width, we define that for 768 pixels and more,
and for 1,200 pixels and more,
this code should would be executed.
So it's important to keep this difference in mind.
What's also important is that the media query code
is not something that replaces the existing CSS code.
The code you write or code base is still valid,
but once the media query kicks in, just the rules,
the properties defined in this media queries are added.
This means if we define a font size for the initial
desktop website and now we have a media query
which takes place and changes the font size,
then only this changed font size will become active.
All other properties which are not mentioned
in the media query are of course still executed and running
as initially defined.
With that, we are almost there to implement
these media queries in our project.
There is just one other thing I want to give you,
I tend to have it a bit easier when working
with this media queries, you see these two break points
I defined as an example right here,
and for these break points, we have some common break points
for media queries that we can keep in mind.
This is of course not a, well, only these break points
are the correct ones approach, these are just
some common break points which helps you
to dive into these queries.
Typically, we can differentiate between portrait mode,
so devices where the content is consumed in portrait mode,
and landscape mode.
Typical portrait devices are of course smartphones
and partially tablets.
Of course, tablets are also used to consume the content
in landscape mode, but typically adding to break points
for smartphones and tablets makes a lot of sense.
Here for smartphones, we have a break point of 480 pixels,
and for tablets, we typically use 768 pixels.
For landscape devices, we have three core examples.
We have a notebook, a desktop computer,
and of course the TV screen
as the biggest device right here.
There we also have three example widths and pixels
which can be used.
1024 pixels for notebooks, 1200 pixels
for desktop computers and everything above 1200 pixels
can be tailored towards TV screens.
As I said, not the final break point summary right here,
but if you need some values at hands,
then you can refer to this slide.
That's the theory though, this is how responsive design
works in theory and how media queries can be implemented.
So let's go back to the project
and see which media queries we might need right there.