What is a Media Query?
A media query is a means of providing conditional CSS rules that are fired based on the device that is used to display an HTML page. You are probably familiar with a couple of different things, the print stylesheet and a projection stylesheet. You may have designed sites that were designed to look right in a 800×600 projector screen and you may have designed sites that are supposed to look right when you to go to print. You actually used a media query to do that when you specified the print stylesheet or when you specified a projector stylesheet.
You can see this media query at work in Thesis. Let’s go ahead and take a look at the source here for. This actually includes the media query because in our head, we’ve got the link and the relationship is a stylesheet. The href is the location of the layout CSS file. The type of file is a text/css file and here’s your media query. It’s media=screen and it also equals projection so this stylesheet will be used for both the screen and for a projection.
Using a Media Query
Now this is one of the ordinary ways in which a media query is used. It’s used inside of this link tag which calls a stylesheet but there is also a different syntax which you probably have seen if you’ve looked at the reading material I gave in the first lesson. The other kind of syntax is syntax that gets called from within a stylesheet rather than inside of an HTML page because this syntax link rail=stylesheet href type equals this whole thing.
This is an HTML-specific reference whereas we’re going to be really looking at the kind of a media query that exists in a CSS stylesheet rather than inside of an HTML file. In any case, this is an example of that media = screen.
In order for us to do this, we need to pick up a bit of terminology and it’s important to recognize that media query or at least the kind of media query that what we’re going to be using consists of first, a media type and 0 or more expressions. That is, it doesn’t have to have any expression. What we just looked at for Thesis doesn’t have any expressions, it’s just defining the media type.
It can be a media type with 0 or more expressions and what those expressions do is they check for specific media features. Keep this in mind, media type expressions and media features, because there’s a set number of media types.
Standard Media Types
We have the standard media types that you’re probably familiar with which is screen, print and projection and those are pretty much self-explanatory. There are a few that are not very often used and that is all handheld, which you don’t want to use and TV. Obviously, you would apply an all stylesheet to every single type of device. The handheld is an antique way of referring to a mobile device and we won’t be using the handheld and television.
Accessibility Media Types
There are the accessibility media types like speech, braille, embossed and tty. Each of these things allow you to develop a stylesheet for different kinds of accessibility. Anyway, those are the media types that exist currently and we are going to focus all of our attention on the screen media type.
Class of Media Features
Now, each media type has a variety of different features or those enter into that expression. For example, the first class of features are dimensions and they are simply the size of the browser window. If you look at the dimensions of this right here, my browser window is a certain size. The entire thing is 1600×900 but that’s from edge to edge. The browser window is actually from this corner here below that top bar to this corner here, below the vertical scroll and beside the vertical scroll. This right here, all the way across there, is the browser window so height and width refers to that part of the browser.
Media Type Dimensions
You have width and height but you’re also going to have a min width or a max width and min height or a max height. We’re actually going to be using the min width max width dimension rather than just width and height. You also have the device dimensions and it is different than the regular dimension because the device dimension doesn’t really speak to the question of the browser window size. The device dimension is reported by the device itself.
From a practical standpoint, they are identical but they are a different set of reported dimensions. In fact, you’re going to see how because of the way Apple does thing, we have to use device width and device height in conjunction with width and height. And device width and device height have the same min and max that can be added to them so min device width, max device width, min device height and max device height.
We have another class of media features called orientation and again, orientation is reported by the device. For example, my monitor here, it doesn’t report an orientation. If I had a media query that said, screen with a max width of 1600 which is what this screen has and orientation of portrait, you wouldn’t understand the portrait because it doesn’t interact with it that way.
However, some devices do and in fact, most tablets do and probably most Smartphones do. They report their orientation depending upon which way you’re holding it and it is either landscape or portrait. Obviously, landscape is horizontal and portrait is vertical.
Then you have these other media features and there are actually a number of other media features which we are going to ignore entirely such as this device aspect ratio, color and color index. You can check to see if the device is monochrome and have a whole different stylesheet of its monochrome device and so on and so forth.
Other Media Features
There are a lot of other media features you can test for but none of them are really relevant to the conversation that we’re having here about designs that are responsive to mobile devices or at least, modern mobile devices. We’re going to ignore all of these other media features and focus primarily on dimensions, device dimensions and orientation.
The media query has a very specific kind of syntax and I’ve seen the one kind of syntax for the media query in an HTML link. We’re actually talking about media queries inside of a CSS file and it has a different style of syntax. The syntax starts off with a media type and that looks just like this, it’s the &media and screen.
It’s very similar to the @import statement that we looked at in the first session and that you may be familiar with in other context. Rather than @import, it’s @media then there’s a space after media and you immediately follow with the media type that being seen.
Add the Expression
Next to that you add the expression. An expression is made up of a combination of logical operators and feature condition pairs. The feature condition pairs are inside of parentheses so you have the logical operator which in this case is “and” and that’s really the one that we’re going to use consistently. We’re going to use the “and” logical operator. You could use “not” and you can use “or” so there are more things you can do with it than we’re going to be talking about.
Nevertheless, it begins with a logical operator. So here it’s the media type screen and it has a width of 1024 px. This is the media type, this is the expression, this is the logical operator of the expression and this is the feature which is with and the condition which is that 1024 px.
What Happens When The Expression is True or False
If this expression is true then the rules that are contained inside of these brackets will be executed, that’s the third part of the syntax. You have the @media screen and the expression or the condition. If the condition is met, if it returns true then everything inside of these brackets is executed. If it isn’t, everything inside of the brackets is ignored.
In this syntax, you can have multiple conditions and we will have multiple conditions. You have @media screen so there’s the media type and width = 1024 px and orientation = landscape. These are multiple conditions, condition 1 and condition 2 and you just end up with logical operators in between each of the conditions so it’s screen and “and”. It could be screen and “or” but in this case, it doesn’t really make that much sense. Nevertheless, multiple conditions are essentially separated by logical operators.
Specify Multiple Media Types
You can also specify multiple media types. It can be @media screen, multiple conditions and if you have another media type you want to specify then you’d put a comma after that media type then repeat it, screen and device width = 1024 pixels. Each of these could be separated, @media screen and @media screen and you could have rules for each of these conditions.
If the rules for both conditions are the same then you would include both media types with their conditions inside of the same media query. You can develop very complex media queries with different screen definitions and different conditions within those media types. Actually, this is what we’re going to be doing, we will have multiple media types with multiple conditions.