How do you use media queries in CSS?

[geekelo]

Media queries in CSS allow you to apply different styles to your website based on the characteristics of the device or viewport, such as its width, height, resolution, orientation, and more. This helps in creating responsive designs that adapt to different screen sizes and devices.

Basic Syntax

@media (media-feature: value) {
  /* CSS rules go here */
}

Common Media Features

1. Width and Height:
   • width, min-width, max-width
   • height, min-height, max-height
2. Orientation:
   • orientation: portrait
   • orientation: landscape
3. Resolution:
   • resolution, min-resolution, max-resolution
4. Aspect Ratio:
   • aspect-ratio, min-aspect-ratio, max-aspect-ratio

Examples

Targeting Different Screen Widths

/* Styles for devices with a width of 600px or less */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* Styles for devices with a width between 601px and 1024px */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    background-color: lightgreen;
  }
}

/* Styles for devices with a width of 1025px or more */
@media (min-width: 1025px) {
  body {
    background-color: lightcoral;
  }
}

Targeting Different Orientations

/* Styles for portrait orientation */
@media (orientation: portrait) {
  body {
    font-size: 16px;
  }
}

/* Styles for landscape orientation */
@media (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

Using Media Queries for Responsive Typography

/* Base font size for mobile devices */
body {
  font-size: 14px;
}

/* Larger font size for tablets and desktops */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* Even larger font size for large desktops */
@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

Combining Multiple Conditions

/* Styles for devices with a width between 601px and 1024px in landscape orientation */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: landscape) {
  body {
    background-color: lightyellow;
  }
}

Best Practices

1. Mobile-First Approach: Start with styles for the smallest screens and add media queries for larger screens.

   /* Base styles for mobile devices */
   body {
    font-size: 14px;
   }
   
   /* Larger screens */
   @media (min-width: 768px) {
    body {
      font-size: 16px;
    }
   }

2. Use Logical Breakpoints: Choose breakpoints based on your content and design rather than specific device sizes.

3. Test Across Devices: Always test your responsive design on various devices and screen sizes to ensure a consistent user experience.

By using media queries effectively, you can create responsive designs that provide an optimal viewing experience across a wide range of devices.