Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
At the heart of responsive design lies a specific type of CSS, or Cascading Style Sheets code, known as media queries. Media queries are conditional statements that tell the browser to use specific sets of styles depending on the size of the screen and other factors. Let's take a look at how simple media queries work and how to build them. What I am going to do here is add a simple media query to the style sheet of this theme. So, I'll go to where I have my theme stored inside my WordPress installation.
It's under the WordPress installation, under wp-content/themes/Anaximander. If I scroll down here, we have the style.css file. I am going to open this in my text editor, which is Notepad++. You can open it in any text editor; it doesn't really make any difference. What I am going to do here is add a simple media query all the way at the bottom of the document, and that media query is going to change the font-family on the entire site when the screen is smaller than a certain size.
The first thing I need to do in a media query is to start a media query. It starts with an @ sign and then you say media. This is a media query. That's what it looks like. Then you set out the conditions that you want to apply. So, I'll say only screen because it should only apply to screens, so not print for instance, or other things. And then I say "and" because there are multiple conditions here. And then I will say (max-width: 900px).
So, what happens here is if the screen is a screen and the max-width is 900 pixels, meaning if it's anything smaller than or 900 pixels, then the following style would kick in. Then I create my style. And the style will be body, because this is going to be for the entire site, bracket, and then I'll put-in the actual style code, font-family: Georgia, Times, Times New Roman, serif.
So, this is a standard font- family that will change the font to the regular serif-type font. I'll close my style and then close by media query. And before I save it, I just want to show you what the site looks like right now. So this is the site. It has this specific Google font that we are using. And even if I resize it, you see that the font stays the same. Now let's see what happens when I save this. So, I save this new style sheet with the media query in it and reload my page, and then resize it again.
And you see, just when we hit the 900 pixel point, the fonts change. If we look at the code inspector, you can actually see this change happen. If I go to Computed Style here, you'll see this line here, font-family: Georgia, Times, Times New Roman. If I pull it out, it pops to Open Sans, Arial, Helvetica; if I pull it back in again, it switches to Georgia. So, you see the media query kicks in and changes a value.
What it's actually doing is serving up a new style that overrides the old style. So, you can use these types of media queries for pretty much anything in the style sheet. That means you can change colors, you can change font, you can change layout, any element. What you are doing is saying, in the following conditions, when you are on a screen and the screen is a certain size, use these styles. In any other situation, use other styles. Now that you see the structure of a simple media query, you will realize that to create media queries on your own, all you really need to know is CSS.
If you want to beef up on your CSS before you continue, you can go check out one of the other CSS courses right here in the lynda.com online training library. As you can see, by using media queries, you can create different styles for your pages depending on what size window or device the visitor is using. This allows you to design a site layout for any screen size and any scenario.
Get unlimited access to all courses for just $25/month.Become a member