CSS Media Queries

[00:00] In this video, we're going to go over using media queries inside your style sheets. Media queries can be used to render different styles depending on your media's type, screen resolution, orientation, and size. Responsive web layout CSS frameworks such as Bootstrap take advantage of media queries to allow for the snapping of columns in a grid as a screen gets larger or smaller.

[00:23] Media queries can be used to check the width and height of a viewport, the width and height of a device, as well as the screen orientation and resolution.

[00:33] In our jsspin example here, we have some basic HTML and in-between the body tags, just a paragraph tag with, "Welcome to egghead.io." We've styled the body tag inside of our CSS giving a background color of lime green with a font color of white as well as some other font stylings.

[00:48] What we'll be using in our media query examples is measuring the width of our screen. Notice when I move the screen to the left and the right, we get a pixel width given to us next to our output label up above.

[01:01] To go over our media query template that we'll be using throughout this video, let's go ahead and break down each part. First, we declare our media query with the @media selector. Next, we conclude not or only, or we can exclude both of those all together.

[01:16] Second is our media type. Media type can be print, screen, speech, or all. Print will be used if a printer is rendering our screen in order to print it out. Screen is used by any sort of device like your computer or your phone. Speech refers to screen readers. All means all media types will get the following rule.

[01:38] Next, we can put and in just plain English, and this is used for comparing two expressions together. That brings us to the expression, which is just a CSS rule which will determine if the below code is applied or not.

[01:52] To just write a basic media query, we'll start by writing @media for the media query selector followed by an expression. Here, we'll put min-width 600 pixels. What this means is that a screen with the minimum width of 600 pixels, or rather we could say 600 pixels or above, apply the following styles.

[02:11] Now we will add the body tag to our style sheet with the background color of pink. You'll notice when we move our output to make it wider, as soon as the width gets greater than 600 pixels, our background color will turn pink. Now, if we shrink the output window again, we'll notice it changes back to lime green as specified in the body tag above.

[02:32] Notice that we have a bare-bones minimum here for our media query. We did not add a not only, we did not add a media type, and we did not add the and. To give an example of how we could add these, if we put all and our expression, we'll notice that we get the same result, as well as if we put only screen and our expression, we still get the same result.

[02:55] If we were to put only print and our expression, notice that when I move the screen to the left and to the right, we no longer get our styles being applied. We'll go ahead and get this back to our basic version before we start adding to it.

[03:08] Let's go ahead and create another example by writing @media, and for our expression, we'll put max-width 300 pixels. This is the equivalent of 300 pixels or less. In here, we'll style our body tag with a background color of red. Notice that if we shrink the width down to below 300 pixels, our background snaps to red.

[03:26] Now, as we start to expand it again, it'll turn to lime green, because we haven't met our requirements of min-width 600 in order to get the pink background. If we continue to expand the output window, we notice that once we get past 600, our pink style will again kick in.

[03:41] To give an example of using our and operator to combine two expressions together, let's go ahead and create another media query. An example of when you would use this is if you want to style something on your site or web application for, let's say, a tablet but not a desktop or mobile device. We specifically want to target the width range within tablet devices.

[04:02] Let's go ahead and write @media min-width 400 pixels and max-width 500 pixels. Again, we'll add our body tag. This time, we'll give it a background color of yellow and a font color of black.

[04:15] Notice as we expand and collapse our viewport here how our different media queries will kick in to style our output. First, when we come above 600, we notice that our pink color is still applied to the background.

[04:27] As soon as we drop below 600, our lime green kicks in again. Now, we'll drop below 500, and we'll see that our background yellow with font color of black is applied. As soon as we get below 400 pixels, our lime green will kick in again. Lastly, we get below 300 pixels and our background color of red is applied.

[04:47] As you can see, media queries are quite powerful and can be used in a variety of ways to help you design responsive layouts. Usually, min and max width will be your go-to expressions when building out your media queries, but you do have many options available to you, and you can get creative when making custom design for your web apps and websites.