Media Queries in CSS

@media media-type and (condition) {
  /* CSS rules */
} 

• media-type: Specifies the type of media the styles are intended for (e.g., screen, print, etc.). This part is optional; if not specified, it defaults to all.
• condition: The specific condition that must be met (e.g., screen width, device resolution). Conditions are defined using features such as width, height, orientation, resolution, etc.
• CSS rules: The styles that will be applied when the conditions are true.

Common Media Query Conditions

Here are some commonly used conditions you can use in media queries:

• min-width: Applies the styles when the viewport is at least the specified width.
• max-width: Applies the styles when the viewport is no larger than the specified width.
• min-height: Applies the styles when the viewport is at least the specified height.
• max-height: Applies the styles when the viewport is no taller than the specified height.
• orientation: Determines whether the device is in landscape or portrait mode (portrait or landscape).
• resolution: Specifies the resolution of the device (e.g., dpi, dppx).
• device-width and device-height: Specifies the width or height of the device itself.

Example: Basic Media Query for Screen Width

Let’s start with a simple example. This media query applies styles only when the screen width is at least 600px wide:

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

This media query applies the background color lightblue to the body when the viewport is at least 600px wide.

Example: Media Query for Mobile Devices (Max Width)

To create a responsive design that targets mobile devices, you can use a max-width condition:

@media screen and (max-width: 600px) {
  body {
    font-size: 14px; /* Adjust font size for smaller screens */
  }

  .container {
    padding: 10px; /* Add padding for smaller screens */
  }
} 

• This media query applies when the screen width is 600px or smaller (e.g., mobile devices).
• It changes the font size to 14px and adds 10px padding to elements with the .container class.