So now that we've looked at some of the different ways that we can create responsive websites, we're 1
going to do a deep dive into one of those first methods through the use of media queries. 2
And media queries are actually pretty simple to understand, as you've seen before. 3
Essentially, instead of the selector, we have the "@media" keyword and here you can define what's 4
called a breakpoint. 5
This essentially says that at this particular width, anything that is less than or equal to 600px, 6
then you should use this styling in here, instead. 7
For example, change the h1 to have a smaller font size when it's on a mobile phone instead of a full 8
width desktop website. 9
Let's look at some demo code. 10
If we have a div here that's completely empty, but we give it a height and a width and we change it 11
to a blue background color, but then we go ahead and add a media query as you saw in the demo website 12
in the last lesson, we can change the divs height and width when it's in this media query's brackets. 13
This is saying when the website is a lot narrower, such as on a mobile phone, we should actually have 14
a smaller square. 15
So instead of 200 by 200px, maybe it should be 100 by 100px instead so that it makes better 16
use of the screen real estate and it's scaled to fit to that screen size. 17
We're using that media query max-width in order to define any screen size that is 600px or below. 18
So anything that is smaller or equal to 600px, then it should have this particular kind of styling 19
and we provide an override to the default styling. 20
Now alternatively, you can use a different keyword here. 21
You can use the min-width, which is the minimum width, and by changing that from max to min, essentially 22
you're going the other direction of responsiveness. 23
So you're saying anything that is from 600px upwards, then we should have a different styling. 24
So you're basically targeting bigger screens with this min width. 25
So if you think about the total possible size of a website, so from 0 to say, I don't know, 2400px, 26
if you have a screen that is say only 600px right here, then you can use the max-width 27
to target this direction. 28
But if you want to target all the screens that are bigger, then you could use the min-width to target 29
in this direction. 30
So you're essentially targeting different screen sizes and providing different styles for those different 31
screen sizes. 32
Now you can also combine different breakpoints to target something that is a specific size. 33
So in this case, you're saying anything that is bigger than 600px, 34
using this particular line here. 35
So minimum width for this style is 600px and then maximum width for this style is 900px. 36
So anything that's less than 900px. And in between these two points is where your specific style 37
is going to be applied. In here. 38
So this means the screens, which are between 600 and 900, will be targeted using this combination 39
system by adding that "and" keyword between these two breakpoints. 40
Now if you flip that around and you change the smaller size to a max-width, then you're taking a different 41
approach. 42
You're saying anything that is less than 600px and anything that is greater than 900px on 43
those screen sizes, 44
let's apply these styles. So you can combine things in many different ways. 45
You can chop it and change it however you like. 46
But the important thing is to understand this wording max-width and min-width, the maximum width where 47
this style will be applied and the minimum width where this style will be applied. 48
So when you read it that way, it becomes much simpler to understand. 49
In addition to max-width and min-width, you might also see this "screen" keyword being used, which is 50
not really necessary by default because it's going to apply it to all screens, 51
but if we think about the alternative to screen is a keyword called "print". 52
And what this allows you to do is to use the media query to target only when your website is being printed 53
and to give it a different layout. 54
I don't normally recommend adding the screen keyword if you're just writing a normal media query, but 55
when you do see it out there in the wild, then you'll know what that means. 56
It's just saying targeting screens, or targeting print. 57
For more on media queries and all of the different properties that you can change using media queries, 58
head over to the Developer Docs and take a look at using media queries. 59
You can see under the syntax section there are a lot of things that we've mentioned, such as orientation, 60
or device-height, device-width or height and width and targeting different media types or targeting 61
different features. 62
And there's a lot more that you can do with media queries and you can have very complex media queries, 63
but most of the time you're going to be using pretty simple media queries such as max-width and 64
min-width, and you won't use a lot of these other features. 65
But as always, it's good to be aware that they exist. 66
So have a quick read of this and see if there's anything else there that you want to pick up. 67
And once you're done, let's go ahead and try an exercise and practice what we learned. 68
Open up the index.html for the starting file that you've just extracted and you can see I've got some 69
TODOs here. 70
Here, I've included some of the common breakpoints for the different devices that you're probably going 71
to want to target. 72
Mobile devices tend to be between 319 and 400px. 73
iPads and tablets tend to have this kind of screen width range (481px-1200px) and then laptops (1201px-1600px) and desktops (1601 and more). 74
I want you to create media queries for this web page so that in these different sizes, the background 75
color of the body will be different. 76
So by default, I've set it to an aquamarine and you can see it just looks like this. 77
It's a very simple website, but I want you to be able to change the width of this website, such as 78
when you right click on Solution and show preview, you can see it actually has different colors depending 79
on how we change it and if we take it out of VS Code and into the browser, then you can see there's 80
actually four different possible colors. 81
You've got desktop, which is the seagreen, and then you've got laptop which is limegreen, iPads, tablets, 82
this kind of powderblue and finally mobile devices which has this salmon, orange or red. 83
So you can do that. 84
Now another way of testing out the responsiveness using the Chrome Developer Tools is to open up the 85
Chrome Developer Tools, 86
if you don't remember how to do that, remember you can go to here and then go to more tools and then 87
you can go to Developer Tools. 88
That's how you open up this pane. 89
And if you click on this little button right here, then you can change the dimensions to, for example, 90
an iPhone SE or to an iPhone 12 or an iPad air and 91
it doesn't really do a lot of the bigger screens, but you can change it to responsive and then you 92
can change the size however you like. 93
And you can also type it in here if you want. 94
So this is a really neat way of testing out responsiveness in Chrome. 95
Pause the video and go ahead and complete this exercise. 96
All right. 97
So let's take a look at the solution code together. 98
Now, notice how essentially all we need is just four different media queries. 99
For the first one, I said that mobile devices are usually between 319 and 480px, 100
now, you could simply just target a max-width of 480, 101
or if you really want to, you can also have a minimum width in there, so that you actually are specific 102
about that mobile device size. 103
So we could put 319 right in here, but normally you're not really going to display your website on 104
anything that's less than mobile size, right? 105
Like there's not that many things that are narrower than 320px. 106
So you could do it either way. 107
It doesn't really matter, but this is one option. 108
Now, the next breakpoint we've got is the iPad and tablet size between 480 and 1200. 109
So we're using that min-width and max-width combo that you see right here to find that particular size 110
and turn it powderblue. 111
And then we do the same for the laptop size. 112
And finally, we simply define a min-width for our desktop so that anything that's larger than 1601 pixels 113
gets a color of seagreen. 114
Hope that was easy enough, and if you had any problems, have a look at the solution code, 115
but most importantly, it should work when you test it out. 116
That's all for media queries. 117
In the next lesson, we've got a final project for this section, so head over there once you're ready.