Name: Learn CSS Media Query In 7 Minutes
Uploaded: 2020-03-28T11:01:59.000Z
Duration: 7 min 11 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Future continuous

In today's video, I'm gonna be talking about media queries which are absolutely essential if you want to do any form of mobile responsive design which in today's day and age, you definitely need to account for mobile devices.

Have simplified my name's Kyle and my job is to simplify the web for you so you can start building your dream project sooner.

Make sure you subscribe to the channel for more videos just like this one.

And now to get started on this video over on the left, I just have a simple style sheet open.

We have a body selector which is changing the color of our text over here to read.

And then we have a title selector on our class, which is this title element over here, which is your slightly larger than our subtitle element, which is just the subtitle over on the right.

I also have a completely re sizable window so I can change the height and the width of our device to simulate a mobile device where a smaller screen size than a desktop device and as I mentioned in the beginning of this video, I'm gonna be talking about mobile responsiveness, and you need to use media queries in order to deal with mobile responsiveness and a media query.

You just start with at Media, and then afterwards you need to put the type of device that you're dealing with.

So this is going to be either a screen, a print device or a speech device.

So screen would be anything with a screen.

For example, Best top phone doesn't matter.

Speech would be something that's text to speech, for example, So a screen reader and then we have print, which would be if we tried to print the page.

So if I came in here and tried to print, that would be what this section is over here.

And then if you want to just select all the different types, there's also the all key word.

So most of the time you're gonna be using all with your media queries.

Then what you can do is you can say, and because you want to come, Cat makes this so you're going to say all of the screens.

So any screen type and then inside parentheses here we need to put our actual media queries selector and one of the most common types of media queries is based on with So we can say Max with of 500 pixels, for example, then inside of these brackets, you just need to write normal CSS code so we could come in here and we can change the color on the body to blue.

And now, if we save this with this insane is whenever on any type of screen, whether it's a screen reader, a actual screen printing, it doesn't matter.

And we have a Max Witt of five air pixels.

So essentially anything that's less than 500 pixels wide.

So when we shrink this, you can see our text turns blue below 500 and it turns back to read above 500.

And that's because what this media query is doing is whenever all of these values are true, then the code inside of it is actually run.

If any of the values air false, it just ignores everything inside the media query.

And now one thing that you'll notice there's a lot of times.

You don't see this all key word, and that's because if you remove the all at the beginning, it defaults to all.

So if you want to do a media query on all different types of devices, you could just leave out the all and just put in the parentheses section, for example, Max with a 500 pixels.

And as you can see, that works just as before, changing our text color for us.

Another thing that we can do is print specific styles so we can say a media query for print.

We could just remove this parentheses section because we just want any time we're printing.

Now, if we save that and we go to print, you'll see that our text color is blue for printing, which is great.

One thing to note about media queries is that they were just like other selectors.

So if we change this here back to a max with of 500 pixels, say that and make sure it still works.

If we change this body selector and we move it all the way down below our media query, you'll notice that no matter what screen size were on, it's always going to be read text.

And that's because it's reading from top to bottom.

And it's always going with the bottom selector if the selectors have the same specificity.

So it's going with a red color, even though this blue color is in the media query.

Essentially, it just ignores it because there's another selector after it.

Now let's move that body selector all the way back to the tough so we can have actual working code.

And if we save that, you can see that it's now working again.

Another thing that Weaken Dio is inside of our media.

We can actually deal with the orientation of our device so we can say orientation, and we want to do, for example, landscape.

So whenever we're in my escape mode, essentially horizontal mode, what we want to do is we want to change our title to have, for example, a color of we'll go green.

So now, as you can see, we're not in landscape mode, we're in portrait mode and our text is normal.

And as soon as we go into landscape mode essentially, whenever our whip becomes wider than our height, as you can see here are text color has changed a green to match the orientation of landscape.

We can also do a very similar thing, but we can do portrait instead.

And then this one will just change our subtitle to be science And now, as you can see when we go into portrait mode R Subtitle Changed is a Cylon and an orientation mode.

We can even go as far as to combine these together.

So, for example, we can say when we're in landscape mode and when our max with is going to be 500 pixels.

So now, as you can see, we're in landscape mode but are with is above 500 pixels assembly.

You can see that we've changed to that green text, and then once we leave landscape mode, you can see it goes back to blue.

So we have to both be in landscape mode and be less than 500 pixels wide because we're able to contaminate thes with the and keyword.

If you wanted to do an or statement instead and we could do is just put a comma instead of the keyword.

And and now with this is saint is any time we're under 500 pixels or in landscape mode, it's going to be green.

So as you can see, we are not in landscape mode anymore.

But our with is less than 500 pixels, so it's green.

And as we increase that above 500 now, we're no longer in landscape mode and no longer less than five pixels wide.

But as soon as we enter landscape mode, even though we're not less than 500 pixels, it's going to turn into green.

So you remember Comma is gonna be Firth, but or and and is going to be for and now there are quite a few different selectors that you can use with media queries.

We're really the main ones that you're gonna mess with is going to be orientation print and Max or men with and Men With is obviously just going to be the opposite of Max with.

So as you can see, we're over 500 pixels wide Andrew and landscape mode.

And as soon as we leave that landscape mode or we become less than 500 pixels wide, it's obviously no longer going to work.

And that's all there is to responsive design with media queries.

If you enjoyed this video, make sure to check out my other videos where you're going to be linked over here and also subscribe to the channel from more videos just like this one.

 Thank you very much for watching and have a good day. 