Learn CSS Media Query In 7 Minutes

hello everyone 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 so let's get started now welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting 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 red 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 resizable window so I can change the height and the width of our device to simulate a mobile device or a smaller screen size than a desktop device and as I mentioned in the beginning of this video I'm going to 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 a desktop 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 keyword so most of the time you're 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're going to say all of the screens so any screen type and then inside parentheses here we need to put our actual media query selector and one of the most common types of media queries is based on width so we can say max width of 500 pixels for example then inside of these brackets you just need to write normal CSS code so we can come in here and we can change the color on the body to blue and now if we save this what this is saying 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 width of 500 pixels so essentially anything that's less than 500 pixels wide and as you can see we're at 504 pixels so when we shrink this you can see our text turns blue below 500 and it turns back to red 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 are false it just ignores everything inside the media query and now one thing that you'll notice is a lot of times you don't see this all keyword 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 can just leave out the all and just put in the parentheses section for example max width of 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 can just remove this parentheses section because we just want anytime we're printing we want the color to be blue 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 work just like other selectors so if we change this here back to a max width of 500 pixels save that and make sure that still works yep still blue below 500 and red above 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 red 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 top so we can have actual working code and if we save that you can see that it's now working again we have our blue text and our red text another thing that we can do 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 Miami scape mode essentially a horizontal mode what we want to do is we want to change our title to have for example a color of will both 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 width becomes wider than our height as you can see here our text color has changed to green to match that orientation of landscape we can also do a very similar thing but we can do portrait instead and in this one we'll just change our subtitle to be cyan and now as you can see it when we go into portrait mode our subtitle changed as a scion and an 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're in landscape mode and when our max width is going to be 500 pixels so now as you can see we are in landscape mode but our width is above 500 pixels as soon as we drop it below that 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 had to both be in landscape mode and be less than 500 pixels wide because we're able to concatenate these with the and key word if you wanted to do an or statement instead of and we could do is just put a comma instead of the key word and and now what this is saying is anytime 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 width 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 500 pixels wide so it's going to be red 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 going to be further or and and is going to be 4 and now there are quite a few different selectors that you can use with media queries but really the main ones that you're going to mess with is going to be orientation print and Max or min width and min width is obviously just going to be the opposite of max-width so as you can see we're over 500 pixels wide and are in landscape mode so it's going to be a title of green 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 which are going to be linked over here and also subscribe to the channel for more videos just like this one thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 769,568

Keywords: webdevsimplified, css tutorial, css media queries, css media query, css media query tutorial, css media queries tutorial, css media queries explained, css media query explained, media query, media query in css, media query tutorial, media queries tutorial, media queries in css, media query width, responsive design tutorial, css responsive design, css responsive design tutorial, css responsive design tips, mobile first css, mobile first, mobile first design, css, css explained

Id: yU7jJ3NbPdA

Length: 7min 10sec (430 seconds)

Published: Tue Nov 19 2019