What are Media Queries?

**Media Queries** are a CSS3 feature that allow content to adapt to different devices and screen sizes without requiring changes to the content itself. They are a cornerstone of **responsive web design**. Using media queries, you can create a single website that looks great and functions well on a desktop computer, a tablet, or a mobile phone.

A media query consists of a **media type** (e.g., screen, print) and can include one or more **media features** (e.g., min-width, max-height) to test for. If the media type and all media features match the environment, the styles inside the media query block are applied.

Basic Syntax

The basic syntax for a media query is:

@media media-type and (media-feature: value) {
    /* CSS rules go here */
}

You can combine multiple media features using logical operators like and, not, and only.

Common Media Types:

• all: For all media type devices.
• screen: For computer screens, tablets, smart-phones, etc. (most common for web).
• print: For printers.
• speech: For screen readers that "read" the page aloud.

Common Media Features:

• width / min-width / max-width: Viewport width.
• height / min-height / max-height: Viewport height.
• orientation: Checks the orientation of the viewport (portrait or landscape).
• resolution: Checks the pixel density (e.g., min-resolution: 300dpi).
• aspect-ratio: Checks the ratio of the viewport's width to its height.

Practical Examples

Changing styles for smaller screens (e.g., mobile phones)

A common use case is to adjust layouts for mobile devices. This query applies styles when the viewport width is 768px or less.

@media screen and (max-width: 768px) {
    .container {
        padding: 0 1rem; /* Reduce padding on smaller screens */
    }
    .hero-content {
        grid-template-columns: 1fr; /* Stack content vertically */
        text-align: center;
    }
    .sidebar {
        width: 280px; /* Adjust sidebar width for mobile */
    }
}

Styling for landscape orientation on tablets

You might want to apply specific styles when a device (like a tablet) is in landscape mode.

@media screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .tablet-landscape-specific-layout {
        display: flex;
        justify-content: space-around;
    }
}

Applying print-specific styles

This media query ensures that the page looks clean and legible when printed, often hiding navigation elements and adjusting font sizes.

@media print {
    .sidebar, .header, .navigation-controls, .footer {
        display: none; /* Hide non-essential elements */
    }
    body {
        color: black;
        background: white;
    }
    a {
        text-decoration: none; /* Remove underlines from links */
        color: black;
    }
}

Mobile-First vs. Desktop-First

There are two main strategies for using media queries in responsive design:

• **Mobile-First (Recommended)**: Start by designing and coding for the smallest screens first (e.g., mobile phones). Then, use min-width media queries to progressively enhance the design for larger screens. This approach ensures good performance and a solid foundation for all devices.

  /* Mobile styles (default) */
  body {
      font-size: 16px;
  }
  
  @media screen and (min-width: 600px) {
      /* Tablet styles */
      body {
          font-size: 18px;
      }
  }
  
  @media screen and (min-width: 992px) {
      /* Desktop styles */
      body {
          font-size: 20px;
      }
  }

• **Desktop-First**: Start by designing for large screens, then use max-width media queries to adapt the design for smaller screens. While feasible, it can sometimes lead to more overrides and less optimized performance for mobile devices.

  /* Desktop styles (default) */
  body {
      font-size: 20px;
  }
  
  @media screen and (max-width: 991px) {
      /* Tablet styles */
      body {
          font-size: 18px;
      }
  }
  
  @media screen and (max-width: 599px) {
      /* Mobile styles */
      body {
          font-size: 16px;
      }
  }

<meta name="viewport"> Tag

For media queries to work correctly on mobile devices, you **must** include the following <meta> tag in the <head> of your HTML document:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tag tells the browser to set the viewport width to the device's width and to set the initial zoom level to 1.0. Without it, mobile browsers might render the page at a desktop width and then scale it down, breaking your responsive design.