CSS Tutorial

CSS Media Queries

Media Queries allow CSS to adapt the layout and design depending on the device's screen size, resolution, or type (like print, screen, etc.).

📐 Syntax:

@media media-type and (condition) {
  /* CSS rules */
}

🔹 Common Use Case:

Change layout based on screen width:

@media (max-width: 600px) {
  .box {
    background-color: #ffc107;
    font-size: 14px;
  }
}

🧪 Live Example:

Resize your browser window to see the box color change when screen width is 600px or less:

🔧 Media Features You Can Use:

• max-width and min-width
• orientation: portrait / landscape
• resolution
• hover, pointer, aspect-ratio, etc.

💡 Tips:

• Use mobile-first design: start with base styles, then add media queries for larger screens.
• Combine with flex/grid for powerful responsive layouts.