@codeswithpankaj

CSS3 Media Queries

By Codes With Pankaj

Table of Contents

  1. What are CSS3 Media Queries?

  2. How Media Queries Work

  3. Basic Syntax of Media Queries

  4. Types of Media Queries

    • Media Types

    • Media Features

  5. Common Media Features

    • Width and Height

    • Orientation

    • Resolution

  6. Combining Multiple Conditions

  7. Practical Examples

    • Example 1: Changing Layout for Mobile Devices

    • Example 2: Applying Different Styles for Landscape and Portrait Modes

    • Example 3: Responsive Font Sizes

  8. Best Practices for Using Media Queries

  9. Cross-Browser Compatibility

  10. Conclusion

1. What are CSS3 Media Queries?

CSS3 Media Queries are a feature in CSS that allows you to apply styles to your web page based on the characteristics of the user’s device. This means you can design your website to look good on all devices, whether it's a small mobile phone screen, a tablet, or a large desktop monitor. Media queries help in creating responsive designs, which adapt the layout and styling of a website to different screen sizes and resolutions.

Key Concept:

  • Media Queries: A CSS feature that allows you to apply different styles to a webpage depending on the characteristics of the device or screen.

Example:

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

Explanation:

  • This media query changes the background color of the webpage to light blue when the width of the device's screen is 600 pixels or less.

2. How Media Queries Work

Media queries work by checking the conditions specified (such as screen width, height, or orientation) and applying the associated CSS rules only if those conditions are met. This allows you to create a flexible design that adjusts to different devices. For example, you might want to hide certain elements on a mobile phone that you show on a desktop or adjust the font size depending on the screen size.

Basic Process:

  1. Define Conditions: Specify the conditions (e.g., screen width) under which certain styles should be applied.

  2. Apply Styles: Write the CSS rules that should be applied when the conditions are met.

  3. Test and Refine: Test your media queries on different devices to ensure your design looks good everywhere.

Example Process:

  • If the screen width is less than 600 pixels, the background color changes to light blue.

3. Basic Syntax of Media Queries

The syntax for a media query in CSS starts with the @media rule, followed by the condition, and then the CSS rules to apply if the condition is true.

Basic Syntax:

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

Example:

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

Explanation:

  • If the screen width is 768 pixels or less, the font size for the body text is set to 16px.

4. Types of Media Queries

Media queries can be categorized into two main types: media types and media features. Media types are used to target specific types of devices, while media features allow you to apply styles based on specific characteristics of the device, such as its width or orientation.

a. Media Types

Media types allow you to specify the type of device your styles should be applied to. Common media types include screen, print, speech, and all.

Examples of Media Types:

  • screen: Used for computer screens, tablets, smartphones, etc.

  • print: Used for printers.

  • speech: Used for screen readers.

  • all: Applies to all devices.

Example:

@media screen {
  body {
    font-family: Arial, sans-serif;
  }
}

Explanation:

  • This media query applies the Arial font to screens only.

b. Media Features

Media features allow you to apply styles based on specific characteristics of the device. Common media features include width, height, orientation, resolution, and more.

Example of Media Features:

  • width: Targets the width of the device's screen.

  • height: Targets the height of the device's screen.

  • orientation: Targets whether the device is in portrait or landscape mode.

  • resolution: Targets the resolution of the device's screen.

Example:

@media (min-width: 1024px) {
  .container {
    width: 80%;
  }
}

Explanation:

  • This media query applies a width of 80% to the .container class when the screen width is 1024 pixels or more.

5. Common Media Features

Let's explore some of the most common media features used in responsive design.

a. Width and Height

The width and height media features target the dimensions of the device's screen. These are commonly used to apply styles based on the size of the viewport.

Example:

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

Explanation:

  • The sidebar is hidden when the screen width is 600 pixels or less.

b. Orientation

The orientation media feature targets the orientation of the device. The two possible values are portrait (the height is greater than the width) and landscape (the width is greater than the height).

Example:

@media (orientation: landscape) {
  .header {
    height: 100px;
  }
}

Explanation:

  • The header's height is set to 100px when the device is in landscape mode.

c. Resolution

The resolution media feature targets the resolution of the device's screen, usually in dots per inch (dpi) or dots per centimeter (dpcm). This can be useful for applying styles to high-resolution displays, such as Retina screens.

Example:

@media (min-resolution: 300dpi) {
  .image {
    border: 5px solid red;
  }
}

Explanation:

  • A 5px red border is added to the image when the screen resolution is 300dpi or higher.

6. Combining Multiple Conditions

You can combine multiple conditions in a single media query using logical operators like and, or, and not.

Example with and:

@media (min-width: 600px) and (max-width: 1200px) {
  .container {
    padding: 20px;
  }
}

Explanation:

  • The container gets a padding of 20px when the screen width is between 600px and 1200px.

Example with not:

@media not all and (max-width: 600px) {
  .footer {
    display: none;
  }
}

Explanation:

  • The footer is hidden on screens that are wider than 600 pixels.

7. Practical Examples

Let's explore some practical examples of using CSS3 media queries.

Example 1: Changing Layout for Mobile Devices

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

    @media (max-width: 600px) {
      .container {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

</body>
</html>

Explanation:

  • On screens 600px or smaller, the items in the container stack vertically instead of being displayed in a row.

Example 2: Applying Different Styles for Landscape and Portrait Modes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 

 <title>Landscape and Portrait Modes - codeswithpankaj</title>
  <style>
    .header {
      background-color: lightblue;
    }

    @media (orientation: landscape) {
      .header {
        background-color: lightgreen;
      }
    }
  </style>
</head>
<body>

<div class="header">Header Section</div>

</body>
</html>

Explanation:

  • The background color of the header changes to light green when the device is in landscape mode.

Example 3: Responsive Font Sizes

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

    @media (max-width: 1200px) {
      body {
        font-size: 16px;
      }
    }

    @media (max-width: 768px) {
      body {
        font-size: 14px;
      }
    }

    @media (max-width: 480px) {
      body {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

<p>This is a paragraph with responsive font sizes.</p>

</body>
</html>

Explanation:

  • The font size adjusts based on the screen width: 18px for large screens, 16px for medium screens, 14px for small screens, and 12px for extra-small screens.

8. Best Practices for Using Media Queries

When using CSS3 media queries, keep the following best practices in mind:

  • Start with a Mobile-First Approach: Begin by designing for the smallest screens first, and then add styles for larger screens.

  • Use Breakpoints Thoughtfully: Choose breakpoints based on the content of your design, not just common device widths.

  • Combine Media Queries: Combine conditions in media queries to target specific ranges and situations.

  • Test Across Devices: Always test your media queries on multiple devices to ensure they work as expected.

9. Cross-Browser Compatibility

CSS3 media queries are supported in all modern browsers, but always check for specific browser compatibility, especially when using less common media features.

10. Conclusion

CSS3 Media Queries provide a flexible way to create responsive designs that adapt to different screen sizes and device characteristics. By understanding and using media queries, you can ensure your website looks great on any device.

  • Media Types: Target specific types of devices like screens or printers.

  • Media Features: Apply styles based on device characteristics like width, height, orientation, and resolution.

  • Combining Conditions: Use logical operators to combine multiple conditions for more specific styling.

By mastering these concepts, you can create a more user-friendly and versatile website that adapts beautifully to any screen size.

For more tutorials and insights, visit Codes With Pankaj.

PreviousCSS3 Filters

Last updated