For an extensive guide to get started with media queries, go to this previous article.
If you have worked with responsive design, you have probably used media queries. Media queries are a clean and simple way to create responsive websites using CSS. They work by changing the style of the page when your screen is a certain size. Here is a simple example:
@media (max-width: 700px) {
p {color: #f00;}
}This media query would turn the paragraph's text red when the screen's width is smaller than 800px. If you wanted to turn the text red when the screen is larger than 800px, you could use "min-width" instead. You can also set two separate queries such as "max-width" and "min-width". Here is the code for it:
@media (max-width: 700px) and (min-width: 500px) {
p {color: #f00;}
}Awesome! The text will only be red if the width of the screen is between 600px and 800px.
Now what if you what some style to be applied if the screen's width is smaller than 800px or bigger than 1000px? You can do that using a comma to separate the queries like this:
@media (max-width: 400px), (min-width: 800px) {
p {color: #f00;}
}Media queries can be written in many different methods as well.
In HTML:
<!-- HTML5 -->
<link rel="stylesheet" media="(max-width: 700px)" rel="stylesheet" href="example.css" />
<!-- XML -->
<?xml-stylesheet media="(max-width: 700px)" rel="stylesheet" href="example.css" ?>And in CSS:
/* @import */
@import url(example.css) (max-width: 700px);
/* @media */
@media (max-width: 700px) { /* CSS Code */ }In most cases, media queries are used to change styles depending on the screen's width. Although width is the most common application, there is a whole list of other uses.
We can use height the same way that we used width in the earlier examples. For instance, we could change the background color to yellow when the height of the browser is smaller than 600px using the same method as before:
@media (max-height: 600px) {
body {background: #ff0;}
}We can also prefix height and width with device-. If we do this, it will use the entire screen's width and height as a value instead of the just the viewable area's width and height.
The orientation of the device can be use to create custom layouts. This may be useful for positioning menus and buttons in places that are easily accessible to your thumbs. To set specific style to layouts that are in landscape mode, you can use this code:
@media screen and (orientation: landscape) {
menu {float: left;}
}This example would apply float: left styling to any device that is in landscape mode. You could do that same thing with portrait mode:
@media screen and (orientation: portrait) {
menu {float: right;}
}To learn more about the orientation feature and how it can be used, read this previous article
The color feature can be used many different ways. The first way we can use it is to check if the device is color-compatible by using (color). If we want to target only non-colored devices, we can use something that looks like this:
@media not (color) {
body {background: #000; color: #fff;}
}The code above uses the not keyword. It can be used will all of the different media query methods. The code we used could be useful to keep your text easy to read on black and white devices.
Another thing we can do with color is target devices with a minimum (or maximum) number of bits per color component. Let's say you want remove a background image if the device has 4-bit color or less. Here's what that would look like:
@media (max-color: 4) {
body {background-image: none;}
}We can also apply style depending on whether or not a device uses indexed color. To apply style to a device that uses one, you could do this:
@media all and (color-index) {
body {background-image: url(http://tystrong.me/wood-texture.jpg);}
}In this example, we used the all operator. This will simply select all devices, which is default with media queries.
Let's say you want an alert to display if the user's indexed color device has less than 256 colors. That would look something like this:
@media (max-color-index: 255) {
div.alert {display: block;}
}This feature applies to grayscale devices. To give style to all monochrome devices, we can use the (monochrome) value. We can also use the value to give style to devices with a certain number of bits per pixel. For instance, if you want to remove images on all devices that had 8 bits per pixel, we could use this code:
@media (max-monochrome: 8) {
img {display: none;}
}One awesome thing that we can do with the monochrome value is set different styles for color print versus black and white print. We can do this by putting print in front or behind of our normal use of `monochrome. Here's what our CSS could look like:
/* Black and White Print */
@media (monochrome) and print {
body {color: #000;}
}
/* Color Print */
@media not (monochrome) and print {
body {color: #09f;}
}Aspect ratios have change a lot since the birth of smartphones and tablets. Older displays commonly has aspect ratios of 4:3 and 5:3, but now with new HD video standards, we commonly have 16:9 and 16:10 monitors. There are two methods for using aspect ratio; You can use the ratio of the browser with aspect-ratio, or the ratio of the device with device-aspect-ratio.
The following example will make the background yellow if the browser is square or landscape:
@media (min-aspect-ratio: 1/1) {
body {background: #ff0;}
}What if you wanted to hide some content on widescreen monitors? You could use something like this:
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
p {display: none;}
}In that example, if the display has a standard 16:9 or 19:10 aspect ratio, the paragraph will not display.
The value (grid) refers to terminal-type devices. This can be a terminal app like the one above, or an older phone display that uses a single font. This example will remove all images if the user is on a grid-enabled device:
@media (grid) {
img {display: none;}
}One thing to keep in mind is the "em" unit. When creating a display for grid devices, the "em" unit change its meaning. The unit will instead be the exact size of one cell of the grid.
This feature can be used to give styles to output devices with a certain dpi (dots per CSS ‘inch’) or dpcm (dots per CSS ‘centimeter’). For example, if you wanted to set a different font for screen with a resolution smaller than 150dpi, your code could look like this:
@media (max-resolution: 150dpi) {
body {font-family: 'comic sans', cursive;}
}One thing to consider when working with the resolution feature is printing. For printers, the dpi and dpcm correspond to the screening resolution.
Scan refers the scanning process that TV devices use. The value can be set to progressive or interlace. The query could be set up like this:
@media tv and (scan: interlace) {
video {display: none;}
}Again, this method only works with TV devices.
Media types refer to the different types of displays that can be styled differently. Here's a list of the current types:
braille- For use with braille displays. (Example 1 | (Example 2)embossed- For use with a futuristic idea known as embossed displays. (Patent | Experimentation)handheld- For use with cellphones, pda's, and other small devices.print- For use with printers.projection- For use with small-scale and large-scale projectors.screen- Most common type. For use with all screened devices.speech- For use with speech-generating devices. (Example.tty- For use telecommunication devices for the deaf. (Example.tv- For use with televisions.
There have been rumors of the 3d-glasses media type to be valid, although it has not been defined in any W3C specifications. It is, however, mentioned on this W3C specification. If the 3d-glasses did become defines, it would still work because from HTML4 and on, media types are backwards compatible.