Day 10: Web Design with Media Queries

Welcome to Day 10 of our CSS journey! Today, we’re exploring media queries, a fundamental tool for creating responsive web designs. Media queries allow your website to adapt to different screen sizes and devices, ensuring a seamless user experience across desktops, tablets, and smartphones.

What Are Media Queries?

Media queries are a CSS technique used to apply styles based on the characteristics of the user’s device, such as screen width, height, and resolution. They help you create responsive layouts that look great on any device.

Basic Syntax

Here’s a basic example of a media query:

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

In this example, the background color of the body changes to light blue when the screen width is 768 pixels or less.

Common Use Cases

1. Adjusting Layouts:

   .container {
     display: flex;
   }

   @media (max-width: 600px) {
     .container {
       flex-direction: column;
     }
   }

This example switches the flex container from a row layout to a column layout on smaller screens.

2. Hiding Elements:

   .sidebar {
     display: block;
   }

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

This hides the sidebar on screens narrower than 992 pixels.

3. Responsive Typography:

   h1 {
     font-size: 36px;
   }

   @media (max-width: 768px) {
     h1 {
       font-size: 28px;
     }
   }

   @media (max-width: 480px) {
     h1 {
       font-size: 24px;
     }
   }

This example adjusts the h1 font size based on the screen width.

Combining Media Queries

You can combine multiple media queries to target different devices and screen sizes more effectively:

@media (max-width: 768px) and (orientation: portrait) {
  .header {
    background-color: pink;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .header {
    background-color: lightgreen;
  }
}

Practical Example

Let’s create a responsive navigation menu:

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

.nav ul {
  display: flex;
  list-style-type: none;
}

.nav li {
  padding: 10px 20px;
}

@media (max-width: 768px) {
  .nav ul {
    flex-direction: column;
    align-items: center;
  }

  .nav li {
    padding: 10px;
  }
}

Conclusion

Congratulations on completing Day 10! You’ve learned how to use media queries to create responsive web designs that look great on any device. Practice using media queries to enhance the flexibility and usability of your layouts.

Tomorrow, we’ll dive into advanced CSS animations and transitions. Stay tuned and keep coding!

Feel free to share your insights and ask questions in the comments below. Let’s continue learning and mastering CSS together!