2. Implementing Media Queries

Media queries are like special instructions that tell a website how to look on different devices. They're super helpful for adjusting the layout, font size, or even hiding certain parts of the website based on the device's screen size or type.

Key Points:

1. What are Media Queries?

   • Media queries are rules in the code that say, "If the screen is this size or type, do this."

2. Using Media Queries in CSS:

   • Here's how you write a simple media query in CSS:

     /* Example of a media query for screens smaller than 600px */
     @media (max-width: 600px) {
       /* CSS styles for smaller screens go here */
       body {
         font-size: 14px;
       }
     }
     

3. Adjusting Layouts with Media Queries:

   • Media queries help in changing how things are arranged or spaced out on different-sized screens.

     /* Example of a media query for adjusting layout */
     @media (min-width: 768px) {
       /* CSS styles for larger screens go here */
       .container {
         width: 80%;
         margin: 0 auto;
       }
     }
     

4. Making Text and Images Responsive:

   • With media queries, text and images can resize or adjust to fit better on screens of varying sizes.

     /* Example of a media query for adjusting font size */
     @media (max-width: 480px) {
       /* CSS styles for smaller screens go here */
       .header {
         font-size: 20px;
       }
     }
     

5. Hiding or Showing Content:

   • Sometimes, you might want to hide or show certain parts of the website on different devices using media queries.

     /* Example of a media query for hiding content */
     @media (max-width: 768px) {
       /* CSS styles for smaller screens go here */
       .sidebar {
         display: none;
       }
     }
     

That’s all it takes to create your website for different screens.

In the next chapter we’ll discuss about how to implement Flexbox.