Media queries in CSS are used to apply different styles to a webpage depending on the device's characteristics, such as screen width, height, resolution, orientation, and more. They are a crucial component of responsive design, allowing you to create layouts that adapt to different screen sizes and device capabilities.

Basic Syntax

A media query consists of a media type and one or more conditions, which can be combined with logical operators like and, or, and not. Here's the basic syntax:

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

Examples

1. Basic Media Query

   This query targets screens that are at least 768 pixels wide (typically tablets and larger devices).

   @media (min-width: 768px) {
       body {
           font-size: 18px;
       }
   }
   

2. Combining Conditions

   You can combine multiple conditions to be more specific. For example, targeting screens between 768 and 1024 pixels wide:

   @media (min-width: 768px) and (max-width: 1024px) {
       body {
           background-color: lightblue;
       }
   }
   

3. Orientation

   Media queries can also target the orientation of the device, either portrait or landscape.

   @media (orientation: portrait) {
       .container {
           padding: 20px;
       }
   }
   
   @media (orientation: landscape) {
       .container {
           padding: 10px;
       }
   }
   

4. Resolution

   Media queries can target different screen resolutions, which is useful for high-DPI displays like Retina screens.

   @media (min-resolution: 192dpi) {
       .high-res-image {
           background-image: url('high-res-image.png');
       }
   }
   

5. Device Width vs. Viewport Width

   • device-width: Refers to the width of the device’s screen.
   • viewport-width: Refers to the width of the viewport (the visible part of the webpage).

   In most cases, viewport-width is more commonly used because it relates to how the user interacts with the content.

   @media (max-device-width: 600px) {
       .sidebar {
           display: none;
       }
   }
   
   @media (max-width: 600px) {
       .sidebar {
           display: none;
       }
   }
   

Practical Use Cases

1. Responsive Typography

   Adjust font sizes for different screen sizes to ensure readability.

   body {
       font-size: 16px;
   }
   
   @media (min-width: 768px) {
       body {
           font-size: 18px;
       }
   }
   
   @media (min-width: 1024px) {
       body {
           font-size: 20px;
       }
   }
   

2. Responsive Layouts

   Change the layout based on the screen size. For example, switch from a single-column layout on mobile to a multi-column layout on larger screens.

   .container {
       display: block;
   }
   
   @media (min-width: 768px) {
       .container {
           display: flex;
           flex-direction: row;
       }
   }
   

3. Hiding Elements

   Hide or show elements based on screen size to optimize the user experience.

   .sidebar {
       display: none;
   }
   
   @media (min-width: 768px) {
       .sidebar {
           display: block;
       }
   }
   

Best Practices

• Mobile-First Design: Start with styles for the smallest screen sizes and use media queries to add styles for larger screens. This approach ensures that your design is optimized for mobile devices by default.
• Keep It Simple: Use media queries to handle layout changes and avoid complex CSS rules that might become difficult to manage.
• Test Across Devices: Regularly test your media queries on various devices and screen sizes to ensure they work as expected.