You can access the full course here: Bite-Sized Responsive Web Design
In this lesson, you will learn how to create media query breakpoints.
Creating Media Queries
For this exercise, you will be setting what are referred to as media query breakpoints. Typically for web design, you will want to set three different media queries. One for desktops, one for tablets, and one for smartphones. As discussed in the previous lesson, this will be done by specifying different screen widths in pixels for the appropriate CSS rules.
You will want to open up the media-queries.html file that is included in the Course Files, in the Project (Start) folder. You will also want to activate the Live Preview so that you can see what is happening as you add code to the file.
The first thing you will want to do is disable mobile browser scaling. As you are going to be doing this with the media queries yourself, you don’t need to have the browser doing it for you. You will be adding code in the <head> block. See the code below:
<head>
<meta charset="utf-8">
<title>CSS Media Queries</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>To fully explain what this code does would take a long time and is outside of the scope of this course. The important thing is that this will turn off what is called browser zoom, or mobile browser scaling, which will ensure that the media queries function properly.
For this course, each of the different CSS topics will be done using internal style sheets. In actual practice, it is usually better to use an external style sheet, but for educational purposes, this will allow you to more easily refer to each topic individually.
The next step for creating the media query breakpoints is to add the <style> block. This will also go in the <head> block and will be where all of the CSS rules go for this HTML page. You’ll be setting up rules for a few different elements of the HTML page. See the code below:
<head>
<meta charset="utf-8">
<title>CSS Media Queries</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { margin: 0; }
body { background: rgba(255,0,0,0.25); }
</style>
</head>The first CSS rule has an asterisk (*) selector. This means that it will apply to every element. The margin property controls the margins of the page, and setting it to zero will ensure that the full page is used. The next rule is for controlling the body element. The background property is used to set the color of the background for anything in the body of the HTML page. You can use the rbga system to set the color, or any of the numerous other methods CSS provides for setting colors. The order of numbers for rbga is red, green, blue, alpha, with the rgb values from 0 to 255 and alpha from 0 to 1. If you are not familiar with this system, alpha is used to set the transparency of the color. Feel free to adjust the numbers to see the effect it has on the color of the background.
Now you can make your first media query. This will be done in the style block. See the code below:
<style>
* { margin: 0; }
body { background: rgba(255,0,0,.25); }
@media screen and (min-width: 768px) {
body { background: rgba(0,255,0,.25); }
}
</style>This code will make it so that when the specified condition is met, meaning that the screen is above the minimum width of 768 pixels, the new body CSS rules will be applied.
The next step is to make a second media query. Copy and paste the first one, then change the value for the min-width and for the rgba of the background. See the code below:
<style>
* { margin: 0; }
body { background: rgba(255,0,0,.25); }
@media screen and (min-width: 768px) {
body { background: rgba(0,255,0,.25); }
}
@media screen and (min-width: 1200px) {
body { background: rgba(0,0,255,.25); }
}
</style>Save the file, then go to your live preview. If you adjust the scale of the window, you should see the three different colors at the different size values you have specified. If the window is at or below 768 pixels, it will be red. If it is between 768 and 1200 pixels, it will be green. Above 1200 pixels, it will be blue.
This particular CSS rule set up is referred to as a mobile-first approach. This is because there are rules that are above the intentional media queries in the style block. These rules will be what is used for smartphones and will be the default unless they are overridden elsewhere.
Now that you have set up some basic media queries, feel free to adjust some of the values to get a better understanding of how the rules are applied. Make sure to save your file before moving on.
Transcript
What I’m gonna do here, this is inside the head area, is I’m gonna open angle bracket, meta, followed by a space and then name equals. And then in quotes, viewport. And then outside of the closing quote there, throw in a space. And I’m gonna go content equals, and then I’m gonna open up another pair of quotes. And then let’s go width=device-width followed by a comma and a space. And then initial-scale=1, just like that. And then close off your angle bracket. This is a self-closing tag here.
So again, you and I could get into a pretty lengthy and detailed conversation about what exactly is going on here but the most important thing here is essentially, what we’re doing is we’re turning off this thing called browser zoom or mobile browser scaling, ensuring that our media queries are going to work and function properly.
What’s the second step? Well, the second step is gonna be to establish our media query breakpoints. And what I’m gonna do here, and I should have mentioned this earlier is I’m gonna build everything here with you inside of an internal style sheet. The first thing that I’m gonna do here is I’m gonna blow out my default browser margins here, so I’m just gonna type in an asterisk here and then a pair of curly braces. And I’m gonna say margin: 0 followed by a semicolon. No big deal, this is something that I do all the time.
The next thing that I’m gonna do is I’m gonna go and set a body rule here. So body and then a pair of squiggly brackets. And I’m gonna say background. And I’m gonna use my RGBA color value. And here’s what I’m gonna specify. I’m gonna go 255,0,0,.25. Now, as soon as I save up my file, there’s Chrome previewing what I’ve done.
Now, what we’re gonna do next is we’re gonna go and establish our media query. So I’m gonna type in an at symbol, this is how we do it, and I’m gonna type in media followed by a space and then screen and, and then a pair of regular brackets. And here’s the first condition, min-width: and then I’m gonna say 768px. And then after the closing bracket there, throw in a pair of curly braces like this.
So as you can see here, all I did is I took body from above, outside of the media query, and pasted ’em into first media query that you and I have established. And all I’m gonna do is I’m gonna change this guy’s background color. What I’m gonna do next is I’m gonna grab the media query that we just inserted and the body rule, and I’m gonna copy that. And then what I’ll do is I’ll paste just below.
And what you and I are gonna do is go and set up a second intentional media query. But I’m gonna change this to 1,200 pixels, change his background color as well. Let’s save up our work. We see a change inside Chrome. As a matter of fact, if I scale my browser window wider, we get kind of this purplish color. If I scaled down, there’s green. If I continue scaling down, that’s what we get.
Interested in continuing? Check out the full Bite-Sized Responsive Web Design course, which is part of our Bite-Sized Coding Academy.
