Media Queries in CSS

Media queries in CSS allow you to apply styles based on the characteristics of the device or viewport. They play a crucial role in creating responsive and adaptive designs for various screen sizes and devices.

Basics

Syntax and Structure

Media queries are written using the '@media' rule, followed by the media type and optional conditions.

				
					/* Basic Media Query Syntax */
@media screen and (max-width: 600px) {
  /* Styles applied when the screen width is 600 pixels or less */
  body {
    font-size: 14px;
  }
}

Common Media Types

Common media types include 'all', 'screen', 'print', 'speech', etc.

				
					/* Media Query with Media Type */
@media print {
  /* Styles applied when printing */
  body {
    color: #000;
  }
}

Intermediate Usage

Breakpoints and Responsive Design

Use media queries to create breakpoints for responsive design.

				
					/* Responsive Design with Media Queries */
/* Default styles for larger screens */
body {
  font-size: 16px;
}

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

Combining Conditions

Combine conditions using logical operators ('and', 'or') for more precise targeting.

				
					/* Combining Conditions in Media Queries */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Styles for screens between 768px and 1024px */
  body {
    line-height: 1.5;
  }
}

Advanced Techniques

Device Orientation

Adjust styles based on device orientation ('portrait' or 'landscape').

				
					/* Media Query for Device Orientation */
@media screen and (orientation: landscape) {
  /* Styles applied when the device is in landscape orientation */
  body {
    background-color: #f0f0f0;
  }
}

Retina Displays

Use media queries to provide styles for high-resolution (Retina) displays.

				
					/* Media Query for Retina Displays */
@media only screen and (min-resolution: 192dpi) {
  /* Styles for high-resolution displays */
  img {
    max-width: 100%;
    height: auto;
  }
}

Resolution Media Queries

Adjust styles based on the resolution of the device’s screen.

				
					/* Resolution Media Query */
@media screen and (min-resolution: 2dppx) {
  /* Styles for high-resolution screens (Retina) */
  img {
    max-width: 100%;
  }
}

Aspect Ratio Media Queries

Tailor styles based on the aspect ratio of the viewport.

				
					/* Aspect Ratio Media Query */
@media screen and (min-aspect-ratio: 16/9) {
  /* Styles for wide-screen aspect ratio */
  video {
    width: 100%;
  }
}

Best Practices

Mobile-First Approach

Adopt a mobile-first approach by writing styles for smaller screens first.

				
					/* Mobile-First Media Query */
body {
  font-size: 16px;
}

@media screen and (min-width: 768px) {
  /* Styles for larger screens */
  body {
    font-size: 18px;
  }
}

Testing and Debugging

Test media queries on various devices and browsers for consistent behavior.

Avoid Overlapping Conditions

Be mindful of overlapping conditions to prevent unintended styles.

Mobile-First Typography

Implement a mobile-first typography approach for better readability.

				
					/* Mobile-First Typography with Media Queries */
body {
  font-size: 16px;

  @media screen and (min-width: 768px) {
    font-size: 18px;
  }

  @media screen and (min-width: 1200px) {
    font-size: 20px;
  }
}

Embrace Feature Queries

Use feature queries to check for browser capabilities before applying styles.

				
					/* Feature Query for Flexbox Support */
@media (display: flex) {
  /* Styles applied only if the browser supports flexbox */
  .container {
    display: flex;
    justify-content: space-between;
  }
}

Practical Use Cases

Hiding/Showing Elements

Use media queries to hide or show elements based on screen size.

				
					/* Hiding/Showing Elements with Media Queries */
@media screen and (max-width: 768px) {
  /* Hide a navigation menu on smaller screens */
  nav {
    display: none;
  }
}

Adaptive Typography

Adjust font sizes for better readability on different devices.

				
					/* Adaptive Typography with Media Queries */
body {
  font-size: 16px;
}

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

Advanced Use Cases

Advanced Grid Layouts

Implement complex grid layouts with media queries for different screen sizes.

				
					/* Advanced Grid Layouts with Media Queries */
.container {
  display: grid;
  grid-template-columns: 1fr;

  @media screen and (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media screen and (min-width: 1200px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

Responsive Images

Make images responsive by adjusting their size based on screen width.

				
					/* Responsive Images with Media Queries */
img {
  max-width: 100%;

  @media screen and (min-width: 768px) {
    max-width: 50%;
  }

  @media screen and (min-width: 1200px) {
    max-width: 33.33%;
  }
}

Considerations

Print Styles with Media Queries

Create styles specifically for print layouts.

				
					/* Print Styles with Media Query */
@media print {
  /* Styles for printed documents */
  body {
    color: #000;
  }
}

Combining Media Features

Combine multiple media features for precise targeting.

				
					/* Combining Media Features */
@media screen and (min-width: 768px) and (orientation: landscape) {
  /* Styles for landscape orientation on screens wider than 768px */
  body {
    background-color: #f0f0f0;
  }
}

Media queries are an integral part of modern web design, enabling developers to create layouts that adapt to various devices and screen sizes. From basic syntax to advanced techniques, understanding media queries allows you to build responsive and user-friendly websites. Happy Coding! ❤️