What’s Covered?
In this tutorial we will explore the use of media queries, a new addition brought about with CSS3. Using media queries we are able to accomplish some style techniques that were not so easily possible before, such as responsive design and device recognition. Today we see this without even noticing most of the time, but if you analyze many of the most popular websites you will see this in action on the majority of them.
What is a Media Query?
A media query is composed of at least one media type (e.g. a style sheet) and one or more expressions – “media features” – that return either true or false. These expressions limit the style sheet’s scope by page width, height, color, etc. All media features must evaluate to true for the CSS styles to be applied, unless you are using the operators not or only.
Logical Operators
A logical operator within a media query can be one of the following: not, and, only, and or. The use of these operators is very simple.
First we will start with the and operator. This will allow you to combine different media features that you want to be true in order for the CSS styles to be applied. For example, let’s say we want the viewer’s page width to be at least 1024px wide and the page orientation is in landscape.
“And” Operator – Loaded by a <link> tag:
<link rel="stylesheet" href="./css/1024-land.css" media="(max-width: 1024px) and (orientation: landscape)" />
“And” Operator – Loaded by an internal style sheet:
<style>
@media (max-width: 1024px) and (orientation: landscape) {
.style1 { ... }
.style2 { ... }
}
</style>
Now let’s take a look at the not operator – again, very simple to use. We would use this operator if we wanted to declare a particular media feature to be false in order for the CSS styles to be applied. So let’s say we want to load certain CSS styles if the media type is not screen.
** The not operator requires an explicit media type to be defined.
“Not” Operator – Loaded by a <link> tag:
<link rel="stylesheet" href="./css/non-screen.css" media="(not screen)" />
“Not” Operator – Loaded by an internal style sheet:
<style>
@media (not screen) {
.style1 { ... }
.style2 { ... }
}
</style>
Next we have the only logical operator. This will require that an entire query matches in order for the CSS styles to be applied. This is mostly used to prevent older browsers that do not support media queries from applying the given styles or stylesheet. In our example we will require that the media type be screen and the device supports color display.
** The only operator requires an explicit media type to be defined.
“Only” Operator – Loaded by a <link> tag:
<link rel="stylesheet" href="./css/color-screen.css" media="only screen and (color)" />
“Only” Operator – Loaded by an internal style sheet:
<style>
@media (only screen and (color)) {
.style1 { ... }
.style2 { ... }
}
</style>
Finally, we have the or logical operator, or simply – the comma. That’s right, the or operator is used as a comma which separates different media queries and says “as long as one of these are true.” For any given list of media queries separated by commas, the CSS styles will be applied if any one of them is true. Let’s suppose we want to load CSS styles if the display is not screen and is color OR is print and is color.
“Or” Operator – Loaded by a <link> tag:
<link rel="stylesheet" href="./css/under-800.css" media="not screen and (color), print and (color)" />
“Or” Operator – Loaded by an internal style sheet:
<style>
@media not screen and (color), print and (color) {
.style1 { ... }
.style2 { ... }
}
</style>
Now that we see how the logical operators are used to write media queries, let’s take a better look at the available media types and features that define the query. You can view a complete list of the media features available and information on each at the W3.org website here.
Here we will cover a few of the most common media features:
Media Features
-
width
- Value: (integer)
- Min/Max Allowed: yes
- Media Types: display and touch-screen
- Description: The width media feature is based on the width of the display area projected by the output device. This will include any scroll-bars that may be on the page’s display.
Examples:
Page width must be at least 480px wide:<link rel="stylesheet" href="./style.css" media="min-width:480px" />
Page width must be between 480px and 800px:
<link rel="stylesheet" href="./style.css" media="(min-width:480px) and (max-width:800px)" />
-
orientation
- Value: (portrait | landscape)
- Min/Max Allowed: no
- Media Types: bitmap media types
- Description: The default value for the orientation media feature is landscape. The value becomes portrait when the height media feature is greater than or equal to the width media feature. This can be useful for mobile devices if you want different styles applied to a vertically/horiztonally greater display.
Examples:
Apply styles from style.css when orientation is portrait:<link rel="stylesheet" href="./style.css" media="(orientation: portrait)" />
Apply styles from an internal style sheet when orientation is landscape:
<style> @media (orientation: landscape) { .style1 { ... } .style2 { ... } } </style> -
aspect-ratio
- Value: (ratio)
- Min/Max Allowed: yes
- Media Types: bitmap media types
- Description: The aspect-ratio media feature is defined as the ratio of the width media feature to the height media feature. (e.g. 16/9) This is useful for when you want to apply styles to specific resolutions or resolutions of the same ratio.
Examples:
Apply styles for screen resolutions with an aspect-ratio of 16/9:<link rel="stylesheet" href="./style.css" media="screen and (aspect-ratio: 16/9)" />
Apply styles internally for screens with an aspect-ratio greater than or equal to 16/9:
<style> @media screen and (aspect-ratio: 16/9) { .style1 { ... } .style2 { ... } } </style>
Now let’s take a look at some examples of the logical operators being used with all different media types and features…
Media Query Examples
Loads CSS style sheet for iPhone 4
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="./css/iphone4.css" />
Applies CSS styles to iPhone 5 (portrait or landscape)
<style>
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px) {
.style1 { ... }
.style2 { ... }
}
</style>
Loads CSS style sheet for iPad (portrait or landscape)
<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="./css/ipad.css" />
Loads CSS style sheet for iPad 3 & 4 with Retina Display (portrait or landscape)
<link rel="stylesheet" media="only screen and (min-device-width: 768) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)" href="./css/ipad_retina.css" />
Learn more about media queries for iPad displays here.
Applies CSS styles to a screen display with a minimum width of 800px:
<style>
@media screen and (min-width: 800px) {
.style1 { ... }
.style2 { ... }
}
</style>
Applies CSS styles to a TV display with a maximum width of 1024px:
<style>
@media tv and (max-width: 1024px) {
.style1 { ... }
.style2 { ... }
}
</style>
Applies CSS styles to a display with either a minimum width of 700px or in a handheld landscape format:
<style>
@media (min-width: 700px), handheld and (orientation: landscape) {
.style1 { ... }
.style2 { ... }
}
</style>
Let’s say we want different font sizes between print, screen, and tv displays:
<style>
@media print {
.style1 { ... }
}
@media screen {
.style1 { ... }
}
@media tv {
.style1 { ... }
}
</style>
Media Queries in Internet Explorer
Unfortunately for our Internet Explorer 8 and older users, media queries will not be supported. There are ways around this however with the use of Javascript. By applying jQuery to the equation we can detect the window width and change the style sheet that is loaded accordingly.
Using jQuery to Load Appropriate Style Sheet
We start by including a <link> tag just like before where we load the style sheet that we want. The only difference here is that we will include an id attribute to the link element which Javascript will use to identify the appropriate style sheet.
Load main style sheet and smaller window width style sheet with id applied:
<link rel="stylesheet" type="text/css" href="./css/main.css" /> <link id="small-style" type="text/css" href="./css/small.css" />
Now for the jQuery. This particular code is from css-tricks.com. Basically what this will do is use the id value to change the href value of the <link> element when the window width is changed. The code will be executed at the initial load of the webpage but also whenever the window width is altered.
Here is the code:
<script type="text/javascript">
function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr("href", "css/narrow.css");
} else if ((width >= 701) && (width < 900)) {
$("#size-stylesheet").attr("href", "css/medium.css");
} else {
$("#size-stylesheet").attr("href", "css/wide.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
</script>
Another alternative to this would be the use of Scott Jehl’s respond.js which allows for media queries to be written as normal and then transformed into supported technologies for browsers like IE 8 and older.
The possible combinations of media types and features are endless. Below is a list of the media types and features in Pseudo-code:
Media Types:
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
Media Features:
media_feature: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | aspect-ratio | min-aspect-ratio | max-aspect-ratio | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid
Some browsers have media features specific to that browser that you can take advantage of. This might be good to use when analyzing the browser usage for your website. For example some browsers support O/S version and/or touch-enabled detection. You can view Mozilla’s specific media features here.
All in all, media queries are an excellent advancement included in CSS3. There are too many advantages and opportunities to count that this ability allows. The only question to ask is – “how will you implement them?”