Understanding CSS @media Queries
CSS @media queries are a cornerstone of responsive web design, allowing content to adapt to different conditions such as screen sizes, orientations, and resolutions. This tutorial explores how @media queries work and lists all the possible conditions you can test for.
What are @media Queries?
@media queries in CSS allow you to apply styles based on the result of one or more media feature queries. They enhance the flexibility and responsiveness of a website by making it adapt to the user's device characteristics.
How @media Queries Work
A media query consists of a media type and can contain one or more expressions, which resolve to either true or false. The styles inside the media query are applied if the expression(s) evaluate to true. The basic syntax is:
@media [media-type] and (media-feature-rule) {
/* CSS rules here */
}
Media types include all, print, screen, and speech. However, most modern usage of @media queries focuses on features rather than types.
List of All Possible Media Features
- width: The width of the viewport.
- height: The height of the viewport.
- aspect-ratio: The aspect ratio of the viewport (width/height).
- orientation: The orientation of the device (landscape or portrait).
- resolution: The pixel density of the output device.
- color: The number of bits per color component of the output device.
- color-index: The number of colors the device can display.
- monochrome: The number of bits per pixel in a monochrome frame buffer.
- hover: Whether the primary input mechanism can hover over elements.
- pointer: The accuracy of the primary input mechanism.
- scan: The scanning process of the output device.
- grid: Whether the device uses a grid or bitmap screen.
- update-frequency: How frequently the output device can modify the appearance of content.
- prefers-reduced-motion: Indicates if the user prefers reduced motion (used to prevent animations for accessibility reasons).
- prefers-color-scheme: Indicates if the user prefers a light or dark color scheme.
Examples of @media Queries in Action
/* Example: Adjusting layout for small screens */
@media screen and (max-width: 600px) {
.container {
padding: 10px;
}
}
/* Example: Applying styles for print */
@media print {
body {
font-size: 12pt;
}
.navigation {
display: none;
}
}
/* Example: Prefer dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: white;
}
}
These examples demonstrate how @media queries can target different media features and types to apply specific CSS styles under certain conditions, enhancing the user experience across various devices and environments.
Conclusion
Understanding and utilizing @media queries is essential for any web developer looking to create responsive and adaptive web designs. By mastering the use of different media features, you can ensure that your website provides an optimal viewing experience on all devices and in various contexts.