Contents
Using @media in CSS
As most Internet users browse via devices of various sized-screens, it's crucial to make the design of your website responsive. The most popular way to do that is by using CSS media queries.
With the @media CSS rule, you can specify different styles for different media types or browsing devices. Using a @media query allows you to check various properties of the device (e.g., dimensions or resolution) and apply styles accordingly:
@media only screen and (max-width: 600px) {
body {
background-color: blue;
}
}Syntax for CSS @media
The syntax for the @media rule in CSS is as follows:
@media mediatype (mediafeature) {
style;
}
| Element | Explanation |
|---|---|
| mediatype | Device type |
| mediafeature | Browser/device properties |
| style | Styles to be applied |
Media types
| Value | Used for | Syntax |
|---|---|---|
| all | All media type devices | @media all |
| Printers | @media print | |
| screen | Computer screens, smart-phones, tablets etc. | @media screen |
| speech | Screen-readers | @media speech |
Deprecated media types
| Value | Used for |
|---|---|
| aural | Sound and speech synthesizers |
| braille | Feedback devices for Braille |
| embossed | Paged printers for Braille |
| handheld | Handheld or small devices |
| projection | Slides and presentations that are projected |
| tty | Media using a fixed-pitch character grid (e.g., teletypes) |
| tv | Television devices |
Media features
| Value | Description |
|---|---|
| any-hover | Checks if hovering is available |
| any-pointer | Checks if pointing is available and accurate |
| aspect-ratio | The ratio between the viewport's width and height |
| color | The bits per color number component for the output device |
| color-gamut | Color palette supported by the browser and output device |
| color-index | The number of colors the device can display |
| display-mode | The application's display mode |
| forced-colors | Checks if the browser limits the use of the color palette |
| grid | Whether the device is bitmap or grid |
| height | The height of the viewport |
| hover | Checks if hovering is available with the primary input |
| inverted-colors | Checks if the browser inverts the colors |
| light-level | Level of light in the environment |
| monochrome | Bits per color number on the monochrome device |
| orientation | The viewport's orientation (portrait/landscape) |
| overflow-block | Means the content overflows the viewport along the axis of the block |
| overflow-inline | Means the content overflows the viewport along the axis of the inline |
| pointer | Checks if primary input can point and how accurately |
| resolution | The resolution of the output device in dpcm or dpi |
| prefers-color-scheme | The preferred color scheme of the user |
| prefers-contrast | The preferred color contrast of the user |
| prefers-reduced-motion | The preferred level of motion of the user |
| prefers-reduced transparency | The preferred transparency of the user |
| resolution | Resolution of the output device |
| scan | The scanning process of the output device |
| scripting | Checks if scripting is available |
| update | The frequency at which the output device modifies the content |
| width | The width of the viewport |
Including operators
You can use logical operators to create more complex queries in CSS. In the @media query example below, you can see and used twice:
@media screen and (max-width: 950px) and (min-width: 625px) {
div.example {
font-size: 45px;
padding: 55px;
border: 6px solid yellow;
background: lightgrey;
}
}See what operators are available in the table below:
| Operator | Used to |
|---|---|
| and | Combine multiple media features |
| not | Negate the @media query |
| only | Specify that the whole @media query must match |
Note: you can use a comma as the logical operator or.