Up next in 10
Learn CSS Media Query In 7 Minutes
4K views
Feb 7, 2024
"Learn CSS Media Query In 7 Minutes" is an instructional video designed to provide a quick overview of CSS media queries. Media queries allow developers to apply different styles to web pages based on characteristics such as screen size, device orientation, or resolution. The video likely covers the syntax and usage of media queries, demonstrating how to create responsive designs that adapt to various devices and screen sizes. By condensing the material into a short duration, the video offers a concise yet comprehensive introduction to CSS media queries, enabling viewers to enhance their web development skills and create more versatile and user-friendly websites. Viewers can expect to gain practical knowledge of CSS media queries within a brief timeframe.
View Video Transcript
0:00
Hello everyone
0:01
In today's video, I'm going to be talking about media queries, which are absolutely essential
0:06
if you want to do any form of mobile responsive design, which in today's day and age, you
0:12
definitely need to account for mobile devices. So let's get started now
0:21
Welcome back to WebDev Simplified. My name's Kyle, and my job is to simplify the web for you so you can start building your
0:28
dream project sooner. So if that sounds interesting, make sure you subscribe to the channel for more videos just like this one
0:35
And now to get started on this video, over on the left, I just have a simple style sheet open
0:40
We have a body selector, which is changing the color of our text over here to red
0:44
And then we have a title selector on our class, which is this title element over here
0:48
which is just slightly larger than our subtitle element, which is just the subtitle over on the right
0:54
I also have a completely resizeable window so I can change the height and the width of our device
0:58
to simulate a mobile device or a smaller screen size than a desktop device
1:03
And as I mentioned in the beginning of this video, I'm going to be talking about mobile responsiveness
1:08
and you need to use media queries in order to deal with mobile responsiveness
1:13
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
1:20
So this is going to be either a screen, a print device, or a speech device
1:25
So screen would be anything with a screen, for example, desktop, phone doesn't matter speech would be something that's text to speech for example
1:33
so a screen reader and then we have print which would be if we tried to print
1:38
the page so if I came in here and tried to print that would be what this section
1:41
is over here and then if you want to just select all the different types there also the all keyword so most of the time you going to be using all with your media queries Then what you can do is you can say and because you want to concatenate this so you
1:55
going to say all of the screens, so any screen type, and then inside parentheses here we
2:00
need to put our actual media query selector. And one of the most common types of media queries is based on width
2:07
So we can say max width of 500 pixels, for example. inside of these brackets, you just need to write normal CSS code
2:16
So we can come in here and we can change the color on the body to blue
2:20
And now if we save this, what this is saying is whenever on any type of screen, whether
2:25
it's a screen reader, a actual screen printing, it doesn't matter, and we have a max
2:30
width of 500 pixels. So essentially anything that's less than 500 pixels wide, and as you can see, we're
2:36
at 504 pixels. So when we shrink this, you can see our text turns blue below 500, and it turns
2:42
back to red above 500. And that's because what this media query is doing is whenever all of these
2:47
values are true, then the code inside of it is actually run. If any of the values are false
2:53
it just ignores everything inside the media query. And now one thing that you'll notice is a lot
2:58
of times you don't see this all keyword. And that's because if you remove the all at the beginning
3:03
it defaults to all. So if you want to do a media query on all different types of devices
3:08
you can just leave out the all and just put in the parentheses section, for example, max
3:12
width of 500 pixels, and as you can see, that works just as before, changing our text
3:17
color for us. Another thing that we can do is print specific styles, so we can say a media query for print
3:24
We can just remove this parentheses section because we just want any time we're printing
3:28
we want the color to be blue. Now if we save that and we go to print you see that our text color is blue for printing which is great One thing to note about media queries is that they work just like other selectors
3:40
So if we change this here back to a max width of 500 pixels, save that and make sure that
3:47
still works. Yep, still blue below 500 and right above. If we change this body selector and we move it all the way down below our media query, you'll
3:56
notice that no matter what screen size we're on, it's always going to be red text, and that's because it's reading from top to bottom, and it's always
4:04
going with the bottom selector if the selectors have the same specificity
4:09
So it's going with a red color, even though this blue color is in the media query
4:13
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 top, so we can have actual working
4:20
code, and if we save that, you can see that it's now working again
4:24
We have a blue text and our red text. Another thing that we can do is inside of our media, we can actually deal with it
4:30
the orientation of our device. So we can say orientation, and we want to do, for example, landscape
4:36
So whenever we're in landscape mode, essentially horizontal mode, what we want to do is we want
4:41
to change our title to have, for example, a color of, we'll go with green. So now, as you can
4:49
see, we're not in landscape mode, we're in portrait mode, and our text is normal, and as soon as we
4:54
go into landscape mode, essentially whenever our width becomes wider than our height, as you can see
4:59
here, our text color has changed to green to match that orientation of landscape
5:04
We can also do a very similar thing, but we can do portrait instead, and in this one we'll
5:10
just change our subtitle to be cyan, and now as you can see, when we go into portrait mode
5:17
our subtitle changes to the cyan and in orientation mode you can see our title is green We can even go as far as to combine these together So for example we can say when we in landscape mode and when our max width is going
5:30
to be 500 pixels. So now as you can see, we are in landscape mode, but our width is above 500 pixels
5:37
As soon as we drop it below that, you can see that we've changed to that green text, and
5:41
then once we leave landscape mode, you can see it goes back to blue
5:45
So we had to both be in landscape mode and be less than 500 pixels wide because we're able
5:49
to concatenate these with the and keyword. If you wanted to do an or statement instead of and, we could do is just put a comma instead
5:57
of the keyword and. And now what this is saying is any time we're under 500 pixels or in landscape mode, it's
6:03
going to be green. So as you can see, we are not in landscape mode anymore, but our width is less than 500 pixels
6:09
so it's green. And as we increase that above 500, now we're no longer in landscape mode
6:15
and no longer less than 500 pixels wide, so it's going to be red
6:18
But as soon as we enter landscape mode, even though we're not less than 500 pixels, it's
6:22
going to turn into green. So you remember comma is going to be for an or, and and is going to be for and
6:29
Now there are quite a few different selectors that you can use with media queries, but really
6:33
the main ones that you're going to mess with is going to be orientation, print, and
6:37
max, or min width. And min width is obviously just going to be the opposite of max width, so as you can see
6:43
over 500 pixels wide and we're in landscape mode, so it's going to be a title of green
6:48
And as soon as we leave that landscape mode, or we become less than 500 pixels wide, it's
6:52
obviously no longer going to work. And that's all there is to responsive design with media queries
6:58
If you enjoyed this video, make sure to check out my other videos, which are going to be linked
7:02
over here, and also subscribe to the channel for more videos just like this one
7:07
Thank you very much for watching and have a good day
#Computers & Electronics
#Skins
# Themes & Wallpapers