Media Queries

James Rogers
A free video tutorial from James Rogers
Creative Thinker at Udemy
4.7 instructor rating • 1 course • 1,575 students

Learn more from the full course

HTML and CSS: A Guide to Web Design

Learn how to create an attractive and functional responsive website, without overly complicated terms and ideas.

14:07:58 of on-demand video • Updated November 2015

  • take the structure and fundamentals learned to create simple, and complex websites for just about anything
  • take many CSS and HTML fundamentals from example to production
  • find and fix common errors that occur in the coding process
  • Create a responsive site from scratch, or retrofit an existing site
English [Auto] Before we get going in our major responsive coding there are a couple of key elements that you need to understand what they are and how they work in terms of responsive. It's not a matter of just going in and adjusting CCS or writing new CSSA you have to write it in such a way that the browser knows how to tell the difference between the new C Ss and the old C Ss and how to tell what browser it wants or what device you're trying to make it. Target so right now if I was to open up my project I see SS this open grid and Main. So right now we have all this CSSA that tells the Web site how to work. But if I was to open up this Web site right now on my phone it would look pretty much like this. If I was to zoom in then of course it would look like this. And that's because I don't have any special rules yet telling it how to act on different devices. So just as an example let's open up a new seeis file here. The key element that we are going to be working with in responsive design is what's known as a media query and a media query is something that lets you pinpoint a media type such as screen or print. It lets you target particular sizes or a max size or a minimum size and you can actually create different scenarios for just about every mobile device that exists on the market today. But that's a lot of work. So I'm going to show you guys a basic framework that works for me. It keeps things very simple. It keeps me from going insane and for all intents and purposes it seems like it works really well. I haven't actually had any of my clients come back to me and tell me that the Web site looked bad on their device although I do imagine that with some of these newer phones that are coming out now like the the iPhone 6 plus and these big Samsung Galaxy note pads and those kinds of things that some of this might get caught in between the tablet and mobile size in which case you'll have to deal with that on a case by case basis. It's pretty much impossible to create a safeguard for every scenario. Just know that for ninety nine point ninety nine percent of what you're going to want to do this lesson is going to help you with that. But there will always be an adjustment afterwards you just can't get away from it. Basically let's say that we have a paragraph and I'm just going to call it tag and let's just put a little bit of success in here. I'm going to read and let's just save this into our Web site folder here. I'm going to call it test C S S. We're going to delete these files afterwards. So it's not a big deal. And let's just create an HMO page call this test each human I put that in the root folder and then you can navigate to that page create your paragraph tag paragraph class tag. This is my test paragraph. You know what let's forget about the tests here says we'll just keep it on this page. This will make it easier. So create a style block. All right. So now you remember that this is how normal's CSSA works. You put it to class whatever you want it put it on your element and then you create a CSSA style. And it shows up in the browser. That's what we've been doing this whole course. But what happens if say I want this to look different when my browser is a different size. That's where media queries come in. So what you'll do is you'll say at media and you can do this in a number of different ways and you can target very specific things. So what I'm going to say is let's say Macs with 400 pixels we're going to enclose everything inside of the curly brackets. So any CSSA that we put in between these two curly brackets now is going to follow this instruction that it will only show up when the browser is no more than 400 pixels wide. OK. So if we came in here and we said tag color and let's say green and font labeled a so we refreshed and nothing happened. Now when I shrink my browser window you see what happened when I hit 400 pixels all of a sudden it changes and I don't have to limit it to just one if I want to just say at max with 800 hey no change OK. So now we have 800. And now you can see that of course it's compounding because this tag says everything from up to eight. And this is up to 400. You see the difference there. We're losing the Bauld when we go bigger but it's keeping the font size because it's different. Now what if I wanted it to be completely different. Well this is when you would enter in a range. So if we said the minimum with is 200 and the maximum with is 400 and then we save for this one the minimum with is 400 and wine and the max with is 800. Now it's a little different. So what's happening now is that we're saying that if our media is between 200 and 400 display this if our browser is now between 400 wine and 800 then display this but it's not displaying the other one at all now because this becomes exclusive. And now this is exclusive. And if we wanted to get really technical sense we'd like to do that sort of thing if I set a minimum with all of a sudden now our middle ground loses the color and you can see that's because I've said that my paragraph tag for read will only happen if the browser has a minimum of 800 pixels wide. If it is not at a minimum then it will lose its color because I have not set a color for the tablet version which is this but I did set a color for my phone version which is this. Hopefully this makes some sense to you guys but basically we use size ranges to create very specific CSA styles and of the best part about it is that these styles they will only apply the things that we specifically put in there. So if there are styles that you dont want to change like a font size or a font color or something then you can leave it in your regular CSSA because it will just add on and it will only change the things that you specifically change. Now the other side of that is lets say I want this to float to the right time well that means now everything is going to float to the right but maybe on the iPhone version or iPhone but the phone version. I don't want it to float at all. And I very specifically have to come in here and say float nine. So I wrote that in the wrong one but you get the idea. This is the fun one. So I have to be very specific about the things that I want to change in the different media queries sections. You can go farther along with this. You can't really test this on a browser. You have to do it on your device. But if there are specific things that don't line up when you switch your phone or your tablet from landscape to portrait mode you can actually come in and Tarja and you can say orientation landscape or portrait. And so what you've done now is you've told this that this CSSA will only apply to these measurements. And if the device is in landscape mode. So if it's in portrait mode then this will not apply to your version. So you can see how we can get fairly complicated by having a bunch of different media queries. And that being said there are different sizes for every device. Of course you have iPhones you have small ones big ones. You have Samsung Galaxy tablets and phones that are big and small. You have Android phones and HTC phones and all of them have different screen sizes. So it's never easy to create something that fits for everybody. And like I was saying. So just as an example the iPhone 5 and 5 es would be a range of 320 pixels up to 500 and 68 if you were looking at an iPhone 4 it would be 320 for 80. If you're looking at an iPhone 6 it's 375 to 667 which is a very odd number. And part of that is because of the retina display. If you were looking at a Samsung Galaxy S4 you're looking at a 320 to 640 ratio. If you're looking at an HTC phone it's a 360 640. So you can see here that things can get out of control fairly quickly but I'm fairly confident that with a little bit of tweaking you'll be able to take the the system that I'm going to show you and you'll be able to turn it into something that you can utilize on your projects. Like I said my example I showed you the locksmith and the other one this is actually built on just three separate media query sizes a normal a tablet and a phone and it works. So that's what we will be going over.