Change the background-color if the document is smaller than 300 pixels wide:
More "Try it Yourself" examples below.
With a @media query, you can write different CSS code for different media types.
This helps when you want different layout for different media types such as a screen or a printer, but also when you want different layout for different devices, which is very useful when making web pages with responsive design.
You can also have different layout when a user resizes the browser window up or down to a certain width, or height.
The numbers in the table specifies the first browser version that fully supports the @media rule.
Rule | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4.0 | 9 |
You can also have different stylesheets for different media:
Value | Description |
---|---|
all | Used for all media type devices |
aural | Deprecated. Used for speech and sound synthesizers |
braille | Deprecated. Used for braille tactile feedback devices |
embossed | Deprecated. Used for paged braille printers |
handheld | Deprecated. Used for small or handheld devices |
Used for printers | |
projection | Deprecated. Used for projected presentations, like slides |
screen | Used for computer screens, tablets, smart-phones etc. |
speech | Used for screenreaders that "reads" the page out loud |
tty | Deprecated. Used for media using a fixed-pitch character grid, like teletypes and terminals |
tv | Deprecated. Used for television-type devices |
Value | Description |
---|---|
aspect-ratio | Specifies the ratio between the width and the 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 the height of the device |
device-height | Specifies the height of the device, such as a computer screen |
device-width | Specifies the width of the device, such as a computer screen |
grid | Specifies whether the device is a grid device or not |
height | Specifies the height of the display area, such as a browser window |
max-aspect-ratio | Specifies the minimum ratio between the width and the 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 the height of the device |
max-device-height | Specifies the maximum height of the device, such as a computer screen |
max-device-width | Specifies the maximum width of the device, such as a computer screen |
max-height | Specifies the maximum height of the display area, such as 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 |
max-width | Specifies the maximum width of the display area, such as a browser window |
min-aspect-ratio | Specifies the minimum ratio between the width and the 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 the height of the device |
min-device-width | Specifies the minimum width of the device, such as a computer screen |
min-device-height | Specifies the minimum height of the device, such as a computer screen |
min-height | Specifies the minimum height of the display area, such as 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 |
min-width | Specifies the minimum width of the display area, such as a browser window |
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, such as a browser window |
Using @media query to make responsive design:
CSS tutorial: CSS Media Types