CSS media queries allow you to apply different styles to different devices based on their characteristics like height, width, resolution, and orientation. This helps in creating responsive web designs that deliver optimized layouts for various screen sizes and devices. Media queries can also be used to specify styles for screen readers.
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. It helps in applying different styles to a website based on the type of device or screen size.
@media not|only media type and (media feature and|or|not media feature) {
/* CSS Properties */
}
• not: Negates the media query.
• only: Applies the styles only if the entire query matches.
• and: Combines multiple media features or queries.
• all: Default media type for all devices.
• print: For printer devices.
• screen: For screens like computers and mobile devices.
• speech: For screen readers that read out the screen.
1. any-hover: Checks if any input mechanism can hover over elements.
2. any-pointer: Checks the precision of any input mechanism.
3. aspect-ratio: Specifies the aspect ratio of the viewport.
4. color: Checks the number of bits per color component.
5. color-gamut: Checks the color range supported by the device.
6. color-index: Checks the number of colors the device can display.
7. grid: Checks if the device uses a grid (tvs and such).
8. height: Checks the height of the viewport.
9. hover: Checks if the primary input mechanism can hover.
10. inverted-colors: Checks if the device uses inverted colors.
11. light-level: Checks the ambient light level (normal, dim, washed).
12. max-: Checks for the maximum value of the feature.
13. min-: Checks for the minimum value of the feature.
14. monochrome: Checks the number of bits per pixel in a monochrome device.
15. orientation: Checks if the viewport is in landscape or portrait mode.
16. overflow-block: Checks how the device handles content overflow in block elements.
17. overflow-inline: Checks how the device handles content overflow in inline elements.
18. pointer: Checks the primary input mechanism's precision.
19. resolution: Checks the resolution of the device in dpi or dpcm.
20. scan: Checks the scanning method (progressive or interlaced).
21. update: Checks the frequency of updates to the output device.
22. width: Checks the width of the viewport.
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
@media screen and (min-width: 600px) and (max-width: 800px) {
body {
background-color: lightgreen;
}
}
@media only screen and (max-width: 600px) {
body {
background-color: lightcoral;
}
}
@media screen and (orientation: portrait) {
body {
background-color: lightgoldenrodyellow;
}
}