The Project | About Us | Contribute | Donations | License

HOME

Media queries are a fundamental part of responsive web design, allowing you to apply CSS styles based on the characteristics of the device rendering the content, such as its width, height, orientation, and resolution. This enables you to create a flexible and adaptive layout that looks good on all devices, from mobile phones to desktop monitors.

Key Concepts

What are Media Queries?
- Media queries are a CSS3 feature that allows you to apply styles based on the result of one or more media queries.
- They can be used to check many things, such as:
  - Width and height of the viewport
  - Width and height of the device
  - Orientation (landscape or portrait)
  - Resolution
Syntax of Media Queries
- Media queries use the @media rule to include a block of CSS properties only if a certain condition is true.
- Basic syntax:
```
@media media-type and (condition) {
  /* CSS rules */
}
```
Common Media Types
- all: Suitable for all devices.
- print: Intended for paged material and documents viewed on a screen in print preview mode.
- screen: Intended primarily for screens.
- speech: Intended for speech synthesizers.
Common Media Features
- width, min-width, max-width
- height, min-height, max-height
- orientation
- resolution

Practical Examples

Example 1: Basic Media Query

This example changes the background color of the body based on the width of the viewport.

/* Default styles */
body {
  background-color: lightblue;
}

/* Styles for screens wider than 600px */
@media screen and (min-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

Example 2: Multiple Conditions

You can combine multiple conditions using logical operators like and, or, and not.

/* Styles for screens between 600px and 1200px */
@media screen and (min-width: 600px) and (max-width: 1200px) {
  body {
    background-color: lightcoral;
  }
}

Example 3: Orientation

This example changes the layout based on the orientation of the device.

/* Styles for portrait orientation */
@media screen and (orientation: portrait) {
  body {
    background-color: lightgoldenrodyellow;
  }
}

/* Styles for landscape orientation */
@media screen and (orientation: landscape) {
  body {
    background-color: lightseagreen;
  }
}

Practical Exercises

Exercise 1: Responsive Typography

Create a media query that changes the font size of the paragraph text based on the viewport width.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Typography</title>
  <style>
    p {
      font-size: 16px;
    }

    @media screen and (min-width: 600px) {
      p {
        font-size: 18px;
      }
    }

    @media screen and (min-width: 1200px) {
      p {
        font-size: 20px;
      }
    }
  </style>
</head>
<body>
  <p>This is a paragraph with responsive typography.</p>
</body>
</html>

Solution

p {
  font-size: 16px;
}

@media screen and (min-width: 600px) {
  p {
    font-size: 18px;
  }
}

@media screen and (min-width: 1200px) {
  p {
    font-size: 20px;
  }
}

Exercise 2: Responsive Layout

Create a responsive layout where a sidebar is displayed next to the main content on screens wider than 800px, and below the main content on narrower screens.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Layout</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
    }

    .sidebar {
      background-color: lightgray;
      padding: 10px;
    }

    .main-content {
      background-color: lightblue;
      padding: 10px;
    }

    @media screen and (min-width: 800px) {
      .container {
        flex-direction: row;
      }

      .sidebar {
        width: 25%;
      }

      .main-content {
        width: 75%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sidebar">Sidebar</div>
    <div class="main-content">Main Content</div>
  </div>
</body>
</html>

Solution

.container {
  display: flex;
  flex-direction: column;
}

.sidebar {
  background-color: lightgray;
  padding: 10px;
}

.main-content {
  background-color: lightblue;
  padding: 10px;
}

@media screen and (min-width: 800px) {
  .container {
    flex-direction: row;
  }

  .sidebar {
    width: 25%;
  }

  .main-content {
    width: 75%;
  }
}

Common Mistakes and Tips

Overusing Media Queries: Avoid using too many media queries. Instead, try to write flexible CSS that works well across a range of devices.
Not Testing on Real Devices: Always test your responsive designs on real devices to ensure they work as expected.
Ignoring Performance: Media queries can impact performance if not used wisely. Minimize the number of media queries and keep your CSS efficient.

Conclusion

Media queries are a powerful tool for creating responsive web designs that adapt to different screen sizes and orientations. By understanding and utilizing media queries effectively, you can ensure that your website provides a great user experience on any device. In the next section, we will delve into responsive typography, where you'll learn how to make your text look great on all devices.

Media Queries

Key Concepts

Practical Examples

Example 1: Basic Media Query

Example 2: Multiple Conditions

Example 3: Orientation

Practical Exercises

Exercise 1: Responsive Typography

Solution

Exercise 2: Responsive Layout

Solution

Common Mistakes and Tips

Conclusion

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website