The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Using Media Queries in CSS

Next ►
►

Media queries are a fundamental tool in responsive web design, allowing developers to apply different styles based on the characteristics of the device rendering the content. This section will guide you through the process of using media queries in CSS, providing practical examples and exercises to solidify your understanding.

Key Concepts

  1. What are Media Queries?

    • 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 width, height, orientation, and resolution.

  2. Syntax of Media Queries

    • Media queries follow a specific syntax that includes a media type and one or more expressions that resolve to either true or false.

  3. Common Media Features

    • Width and height (of the viewport)
    • Device width and height
    • Orientation (landscape or portrait)
    • Resolution (dpi or dpcm)

Syntax and Structure

A basic media query looks like this:

@media (condition) {
  /* CSS rules */
}

Example

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

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

Explanation

  • Default Styles: These are applied to all devices unless overridden by a media query.
  • Media Query: The @media rule specifies a condition (min-width: 600px). If the condition is true (i.e., the viewport is at least 600 pixels wide), the styles within the block are applied.

Practical Examples

Example 1: Responsive Navigation Menu

/* Default navigation styles */
nav ul {
  display: flex;
  flex-direction: column;
}

/* Horizontal menu for larger screens */
@media (min-width: 768px) {
  nav ul {
    flex-direction: row;
  }
}

Example 2: Adjusting Font Size

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

/* Increase font size for larger screens */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
}

Exercises

Exercise 1: Change Background Color

Task: Write a media query that changes the background color of a <div> with the class .container to lightgreen when the screen width is 800px or wider.

Solution:

.container {
  background-color: white;
}

@media (min-width: 800px) {
  .container {
    background-color: lightgreen;
  }
}

Exercise 2: Responsive Image

Task: Use a media query to change the width of an image to 100% when the screen width is less than 500px.

Solution:

img {
  width: auto;
}

@media (max-width: 500px) {
  img {
    width: 100%;
  }
}

Common Mistakes and Tips

  • Overusing Media Queries: Avoid using too many media queries. Instead, aim for a design that is flexible and adapts naturally to different screen sizes.
  • Testing Across Devices: Always test your media queries on multiple devices to ensure they work as expected.
  • Combining Conditions: You can combine multiple conditions in a single media query using logical operators like and, or, and not.

Conclusion

Media queries are a powerful tool in creating responsive designs that adapt to various screen sizes and devices. By understanding how to use them effectively, you can ensure your website provides a seamless user experience across all platforms. In the next section, we will explore breakpoints and how they influence responsive layouts.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved