Media queries are a fundamental part of responsive web design, allowing you to apply different styles to your HTML elements based on the characteristics of the device or viewport. This ensures that your website looks good and functions well on a variety of devices, from mobile phones to desktop computers.

What are Media Queries?

Media queries are a CSS3 feature that allows you to apply CSS rules based on the result of one or more media queries. A media query consists of a media type and one or more expressions that check for the conditions of particular media features, such as width, height, and orientation.

Key Concepts

  1. Media Types: The type of device (e.g., screen, print).
  2. Media Features: Characteristics of the device (e.g., width, height, orientation).
  3. Logical Operators: Used to combine multiple media features (e.g., and, not, only).

Basic Syntax

@media media-type and (media-feature: value) {
  /* CSS rules */
}

Example

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

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

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

In this example:

  • The default background color is white.
  • For screens wider than 600px, the background color changes to light blue.
  • For screens narrower than 600px, the background color changes to light green.

Practical Examples

Example 1: Responsive Typography

/* Default font size */
body {
  font-size: 16px;
}

/* Larger font size for screens wider than 800px */
@media screen and (min-width: 800px) {
  body {
    font-size: 20px;
  }
}

/* Smaller font size for screens narrower than 400px */
@media screen and (max-width: 400px) {
  body {
    font-size: 14px;
  }
}

Example 2: Responsive Layout

/* Default layout */
.container {
  display: flex;
  flex-direction: column;
}

/* Horizontal layout for screens wider than 600px */
@media screen and (min-width: 600px) {
  .container {
    flex-direction: row;
  }
}

Common Media Features

Media Feature Description Example Usage
width The width of the viewport @media (min-width: 600px)
height The height of the viewport @media (min-height: 400px)
orientation The orientation of the device (portrait/landscape) @media (orientation: landscape)
resolution The resolution of the device @media (min-resolution: 300dpi)

Practical Exercises

Exercise 1: Responsive Background Color

Create a simple HTML page with a responsive background color that changes based on the viewport width.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Background Color</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Responsive Background Color</h1>
</body>
</html>

CSS (styles.css):

/* Default background color */
body {
  background-color: white;
}

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

/* Background color for screens narrower than 600px */
@media screen and (max-width: 599px) {
  body {
    background-color: lightgreen;
  }
}

Solution Explanation

  1. Default Styles: The default background color is set to white.
  2. Media Query for Wider Screens: For screens wider than 600px, the background color changes to light blue.
  3. Media Query for Narrower Screens: For screens narrower than 600px, the background color changes to light green.

Exercise 2: Responsive Navigation Menu

Create a responsive navigation menu that changes its layout based on the viewport width.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Navigation Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="navbar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

CSS (styles.css):

/* Default navigation menu styles */
.navbar ul {
  list-style-type: none;
  padding: 0;
}

.navbar li {
  display: block;
  margin: 10px 0;
}

/* Horizontal menu for screens wider than 600px */
@media screen and (min-width: 600px) {
  .navbar ul {
    display: flex;
    justify-content: space-around;
  }

  .navbar li {
    display: inline;
    margin: 0;
  }
}

Solution Explanation

  1. Default Styles: The navigation menu is displayed as a vertical list by default.
  2. Media Query for Wider Screens: For screens wider than 600px, the navigation menu is displayed as a horizontal list using flexbox.

Common Mistakes and Tips

  • Not Using the Meta Viewport Tag: Always include the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag in your HTML to ensure proper scaling on mobile devices.
  • Overusing Media Queries: Use media queries judiciously. Overusing them can make your CSS difficult to maintain.
  • Testing on Multiple Devices: Always test your responsive designs on multiple devices to ensure they work as expected.

Conclusion

Media queries are a powerful tool for creating responsive web designs that adapt to different screen sizes and devices. By understanding and using media queries effectively, you can ensure that your website provides a great user experience across a wide range of devices. In the next section, we will explore how to make images and videos responsive, further enhancing the adaptability of your web designs.

© Copyright 2024. All rights reserved