In the first post in this series, we talked about different ways to fire a media query. First, you could fire an entire style sheet based on features of your device and handle things that way. Or, you could put your media queries right at the end of your existing CSS to reduce latency, albeit slightly. This section digs a little deeper into the CSS direct method.
Breakdown of a Media Query
Here’s a couple examples of how media queries can be written in your CSS:
@media (max-width: 300px) {
//styles go here
}
@media screen and (max-width: 300px) {
//styles go here
}
@media only screen and (max-device-width: 300px) {
//styles go here
}
If we look at these, we see that each query has a simple structure consisting of two parts: the media type and the media feature.
The media query starts with the “@media” signifier. This is just to let the parser know that your initiating a media query.
The next section is the media type. The “screen” in the examples above is the type. The type is essentially a high level keyword that looks at the user agents of the device your looking through.
The last part (in parentheses) is the feature test that must evaluate to true for the styles in the braces to be applied. This includes browser height/width, device height/width, resolution, and landscape/portrait.
All this is then followed by your targeted the CSS you want to apply inside the curly braces.
All Together Meow
When you put all the pieces together, you can start to understand what the various statements mean Basically, if the viewing device type aligns with that media query type, and if the feature statement evaluates to true, the styles in the braces are applied. That’s it. Pretty simple, right?
When we start to look under the hood, we can see that the entire first statement essentially works like an ‘if’ statement in code. If the statement evaluates to true, then the styles contained in it are applied.
Keywords
The keyword ‘and’ can also be used between features to make the media query read as an “&&” would in JavaScript; meaning that both rules have to be true for the statement to be executed.
If you want to different sets of media queries to be executed, you can separate them with a comma which is akin to an “or” statement as such:
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px){
// styles go here
}
Media Types
If you’re curious what all the types are you can use in your media query, here’s a full breakdown of all the types in CSS 3.0 along with a quick synopsis:
| Media Types | Description |
| All | Indicates that the style or style sheet should be applied to all media types |
| Aural | *Note: Device-Aspect-Ratio only applies to visual devices so this feature will always evaluate to false on aural types* |
| Braille | Used for braille devices |
| Handheld | As the name implies, it’s for handheld (mobile) devices |
| For printed media, which includes web browsers showing a ‘print preview’ | |
| Projection | For projectors |
| Screen | For color PC screens |
| Tty | For teletypes, terminals, and other devices w/ limited display capabilities |
| Tv | For TVs |
| Embossed | For braille printers |
You can see you are able to target a lot of different device types. But, in my opinion, this list is still in its infancy. With the “Internet of Things” as well as “wearables” picking up traction, the average screen size continues to get smaller and smaller. Therefore, you can expect the W3C to continue to build on this list as more and more devices need a better experience on their internet connected screens. Just imagine in a few years when a website not only has to work on laptops, phones, and tablets, but also watches, glasses, and appliances.
Media Features
After the media types in the media query is the media feature test. Here is a breakdown of all the features you can test against in the media feature area:
| Media Features | Description |
| Width | Width of the browser or renderer |
| Min-width | A minimum width |
| Max-width | A maximum width |
| Height | Height of the browser or rendering display |
| Min-height | A minimum height |
| Max-height | A maximum height |
| Device-width | Width of the viewport |
| Min-device-width | Minimum width of the viewport |
| Max-device-width | Maximum width of the viewport |
| Device-height | Height of the viewport |
| Min-device-height | Minimum height of the viewport |
| Max-device-height | Maximum height of the viewport |
| Aspect-ratio | Describes the proportional relationship of height and width of the browser or rendering display (ex: 16:9 or 4:3) |
| Min-aspect-ratio | A minimum aspect-ratio |
| Max-aspect-ratio | A maximum aspect-ratio |
| Device-aspect-ratio | The aspect-ratio of the device |
| Min-device-aspect-ratio | The minimum aspect-ratio of the device |
| Max-device-aspect-ratio | The maximum aspect-ratio of the device |
| Color | Checks the number of bits per color of the device, with 0 being false |
| Min-color | Checks color against a minimum value of bits per color; a min-color: 1 will apply to all colors |
| Max-color | Checks color against a maximum value of bits per color |
| Color-index | Checks the number of entries in the color lookup table of the device, with 0 being false |
| Min-color-index | Checks the minimum color-index |
| Max-color-index | Checks the maximum color-index |
| Monochrome | Checks the number of bits per pixel in a monochrome frame buffer, with 0 being false; If device is not monochrome, the output device value will be 0 |
| Min-monochrome | Checks the minimum monochrome bits per pixel |
| Max-monochrome | Checks the maximum monochrome bits per pixel |
| Resolution | Dots Per Inch (DPI), or Dots Per Centimeter (DPCM); Basically checks the resolution of the output device |
| Min-resolution | Checks against minimum resolution |
| Max-resolution | Checks against maximum resolution |
| Scan | A display type that targets televisions that use progressive scanning |
| Grid | Matches Teletype displays or devices that only show a single fixed font |
| Orientation | Portrait or landscape |
Wrap-Up
In this post we took a deep look at all the media features and media types you can test against. Hopefully you can use this page as a reference when building your own media queries. In the next and final post in this series, we will look at the downside of media queries, the right way to test a media query, and some other general tips on usage of them.