Media Queries: CSS Direct Method

Posted by: Stephanie Donahue on November 18, 2014

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
Print 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.

Topics: Enterprise Content Management

    Recent Posts

    Categories