CSS Documentation

Media Queries

Menu

Media Queries

Media queries are a powerful feature in CSS that allow you to apply different styles based on various device characteristics, such as screen size, resolution, or orientation.

Syntax

The basic syntax of a media query is:

@media screen and (max-width: 600px) {
ㅤ/* CSS rules */
}

Common Media Features

  • width, height: Viewport dimensions
  • max-width, max-height: Maximum viewport dimensions
  • min-width, min-height: Minimum viewport dimensions
  • orientation: Portrait or landscape
  • aspect-ratio: Width-to-height aspect ratio of the viewport
  • resolution: Pixel density of the output device

Example

Here's an example of using media queries for responsive design:

.container {
ㅤwidth: 100%;
}

@media screen and (min-width: 600px) {
ㅤ.container {
ㅤㅤwidth: 80%;
ㅤ}
}

@media screen and (min-width: 900px) {
ㅤ.container {
ㅤㅤwidth: 60%;
ㅤ}
}

Best Practices

  • Use relative units (like percentages or em) for flexible layouts
  • Design for mobile first, then scale up for larger screens
  • Test your design on various devices and screen sizes
  • Use logical breakpoints based on your content, not specific devices
  • Combine media queries for more complex conditions

Media queries are essential for creating responsive web designs that adapt to different screen sizes and devices, ensuring a good user experience across all platforms.