Learn how to build and design websites with our tutorials.

CSS @media Queries Tutorial

View Tutorial Contents


The @media Rule

The CSS @media rule, also referred to as media types and media queries, allow you to apply different styles based on the media types (or devices, for example, tablets, mobile phones), width and height of the browser window, width and height of the device, orientation (for example, landscape or portrait on tablets or mobile phones), resolution and much more.

This tutorial will focus on using media queries to change styles depending on the width of the browser window. This allows you to create responsive websites.

The code example below shows an example of how to change the background color if the browser screen is less than 800 pixels. Within the @media rule, the word "screen" is an example of a media type. What is contained inside the parenthesis is called the media feature.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

@media screen and (max-width: 800px){
	body{
		background: yellow;
	}
}

</style>

</head>
<body>

<h1>
This is a heading
</h1>

</body>
</html>

To see an example of how the example code above looks, Click Here.

The CSS syntax of media queries in its simplest form is:


@media media-type and (media-feature){
	your CSS styles...
}


CSS Media Types

Media types allow you to use different styles depending on the media type, for example, screen or print. The list of possible media query media-type values are listed below.

Because we are concerning ourselves with responsive web design here, the media type that we will use all or most of the time is screen.

Value Description
screen used for browser screens (laptops, tablets, smart phones, etc.)
all used for all devices
print used for printers
speech used for screen readers

CSS Media Features

The table below lists the possible media features.

Because we are concerning ourselves with responsive web design here, the media features max-width and min-width are the ones that we will use all or most of the time.

Value Description
max-width Specifies the maximum width of the browser window
min-width Specifies the minimum width of the browser window
aspect-ratio Specifies the ratio between the width and height of the display area
color Specifies the number of bits per color component for the output device
color-index Specifies the number of colors the device can display
device-aspect-ratio Specifies the ratio between the width and height of the device
device-height Specifies the height of the device, for example, a computer screen
device-width Specifies the width of the device, for example, a computer screen
grid Specifies whether the device is a grid device or not
height Specifies the height of the display area, for example, a web browser window
max-aspect-ratio Specifies the minimum ratio between the width and height of the display area
max-color Specifies the maximum number of bits per color component for the output device
max-color-index Specifies the maximum number of colors the device can display
max-device-aspect-ratio Specifies the minimum ratio between the width and height of the device
max-device-height Specifies the maximum height of the device, for example, a computer screen
max-device-width Specifies the maximum width of the device, for example, a computer screen
max-height Specifies the maximum height of the display area, for example, a browser window
max-monochrome Specifies the maximum number of bits per "color" on a monochrome (greyscale) device
max-resolution Specifies the maximum resolution of the device, using dpi or dpcm
min-aspect-ratio Specifies the minimum ratio between the width and height of the display area
min-color Specifies the minimum number of bits per color component for the output device
min-color-index Specifies the minimum number of colors the device can display
min-device-aspect-ratio Specifies the minimum ratio between the width and height of the device
min-device-width Specifies the minimum width of the device, for example, a computer screen
min-device-height Specifies the minimum height of the device, for example, a computer screen
min-height Specifies the minimum height of the display area, for example, a browser window
min-monochrome Specifies the minimum number of bits per "color" on a monochrome (greyscale) device
min-resolution Specifies the minimum resolution of the device, using dpi or dpcm
monochrome Specifies the number of bits per "color" on a monochrome (greyscale) device
orientation Specifies the whether the display is in landscape mode or portrait mode
resolution Specifies the resolution of the device, using dpi or dpcm
scan Specifies progressive or interlaca scanning of a television
width Specifies the width of the display area, for example, a browser window