Media queries are a fundamental part of responsive web design, allowing developers to apply different styles based on the characteristics of the device rendering the content. This section will cover the basics of media queries, how they work, and how to implement them effectively in your CSS.

Media queries are a CSS3 feature that enables the application of styles based on the result of one or more media query expressions, which check for conditions such as screen size, resolution, orientation, and more.

1. Media Types: Specify the type of device (e.g., screen, print) the styles should apply to.
2. Media Features: Define the conditions (e.g., width, height, resolution) that must be met for the styles to be applied.
3. Logical Operators: Combine multiple media features using operators like and, not, and only.

• Media Type: Optional, defaults to all if omitted.
• Media Feature: A condition that must be true for the styles to apply.

Let's create a simple example to demonstrate how media queries can change the layout of a webpage based on the screen size.

• Default Styles: The default styles apply to all devices, setting a column layout for the .container and centering the text.
• Media Query: When the screen width is 600px or wider, the layout changes to a row, distributing the header, main content, and footer side by side.

Task: Create a navigation bar that changes its layout from a vertical list on small screens to a horizontal list on larger screens.

Solution:

1. HTML:

   <nav>
       <ul class="nav-list">
           <li>Home</li>
           <li>About</li>
           <li>Services</li>
           <li>Contact</li>
       </ul>
   </nav>
   

2. CSS:

   .nav-list {
       list-style-type: none;
       padding: 0;
       margin: 0;
       display: flex;
       flex-direction: column;
   }
   
   .nav-list li {
       padding: 10px;
       background-color: #f4f4f4;
       margin-bottom: 5px;
       text-align: center;
   }
   
   @media screen and (min-width: 600px) {
       .nav-list {
           flex-direction: row;
       }
   
       .nav-list li {
           margin-bottom: 0;
           margin-right: 5px;
       }
   }
   

• Common Mistake: Forgetting to include the viewport meta tag in the HTML, which can lead to unexpected results on mobile devices.
• Tip: Use logical operators to combine multiple conditions for more precise control over when styles are applied.

Media queries are a powerful tool in responsive design, allowing you to tailor your website's appearance to different devices and screen sizes. By understanding and utilizing media queries, you can create flexible and adaptive layouts that enhance user experience across all devices. In the next section, we will explore how to use media queries in CSS to create responsive layouts effectively.