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
Your message has been sent to W3Schools.