Examples of Media Queries

Media queries in CSS allow developers to apply styles based on the characteristics of the device or viewport. Let's dive into examples that cover different aspects of responsive design.

Basic Examples

Adjusting Font Size for Small Screens

Basic media query for adjusting font size on smaller screens.

				
					/* Basic Media Query for Font Size */
body {
  font-size: 16px;
}

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

Changing Background Color for Print

Media query to change background color when printing.

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

Intermediate Examples

Responsive Navigation Menu

Adjusting styles for a responsive navigation menu.

				
					/* Responsive Navigation Menu */
nav {
  /* Default styles for larger screens */
  display: flex;

  @media screen and (max-width: 768px) {
    /* Adjust for smaller screens */
    display: block;
  }
}

Adaptive Images for Different Screen Sizes

Changing image sizes based on screen width.

				
					/* Adaptive 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%;
  }
}

Advanced Examples

Optimizing Layout for Tablets and Desktops

Media queries for optimizing layout on tablets and desktops.

				
					/* Media Queries for Tablet and Desktop Layouts */
.container {
  width: 100%;

  @media screen and (min-width: 768px) {
    /* Styles for tablets */
    width: 80%;
    margin: 0 auto;
  }

  @media screen and (min-width: 1200px) {
    /* Styles for desktops */
    width: 60%;
  }
}

Adjusting Grid Layout for Various Screen Sizes

Using media queries to adjust a grid layout.

				
					/* Media Queries for Responsive Grid Layout */
.grid-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 Typography

Fluid Typography for Better Readability

Adjusting font sizes based on the viewport width for a fluid typography experience.

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

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

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

Navigation Menu Examples

Toggle Navigation Menu for Small Screens

Creating a toggle effect for a navigation menu on small screens.

				
					/* Toggle Navigation Menu for Small Screens */
nav {
  display: none;

  @media screen and (max-width: 768px) {
    display: block;
  }
}

Styling Navigation Items Differently

Applying different styles to navigation items based on screen width.

				
					/* Styling Navigation Items with Media Queries */
nav a {
  color: #333;
}

@media screen and (min-width: 768px) {
  nav a {
    color: #555;
  }
}

@media screen and (min-width: 1200px) {
  nav a {
    color: #777;
  }
}

Device Orientation

Styles Based on Device Orientation

Adjusting styles based on the orientation of the device (portrait or landscape).

				
					/* Styles Based on Device Orientation */
@media screen and (orientation: portrait) {
  /* Styles for portrait orientation */
  body {
    background-color: #f9f9f9;
  }
}

@media screen and (orientation: landscape) {
  /* Styles for landscape orientation */
  body {
    background-color: #ebebeb;
  }
}

Print Styles

Optimizing for Print

Creating styles specifically tailored for printed documents.

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

  /* Additional print styles for other elements */
}

Custom Print Styles for Different Elements

Applying distinct styles when printing for various page elements.

				
					/* Custom Print Styles for Different Elements */
@media print {
  body {
    color: #000;
  }

  header, footer {
    display: none; /* Hide header and footer when printing */
  }

  /* Additional print styles for other elements */
}

Resolution Considerations

High-Resolution Images for Retina Displays

Serving high-resolution images for devices with higher pixel density.

				
					/* High-Resolution Images with Media Query */
@media only screen and (min-resolution: 192dpi) {
  img {
    max-width: 100%;
    height: auto;
  }
}

Aspect Ratio Media Queries

Custom Layouts Based on Aspect Ratio

Tailoring styles based on the aspect ratio, useful for accommodating different screen shapes.

				
					/* Aspect Ratio Media Query */
@media screen and (min-aspect-ratio: 16/9) {
  /* Styles for wide-screen aspect ratio */
  section {
    width: 80%;
    margin: 0 auto;
  }
}

@media screen and (min-aspect-ratio: 4/3) {
  /* Styles for standard aspect ratio */
  section {
    width: 60%;
    margin: 0 auto;
  }
}

Feature Queries

Utilizing Flexbox with Feature Queries

Applying styles only if the browser supports Flexbox.

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

Combining Multiple Media Features

Complex Responsive Layout with Multiple Features

Creating a responsive layout with a combination of screen width and device orientation.

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

Retina Displays and Resolution

Providing Styles for High-Resolution Displays

Serving styles specifically for devices with high-resolution displays.

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

Responsive Tables

Responsive Table Layout with Media Queries

Ensuring tables are presented appropriately on smaller screens.

				
					/* Responsive Table Layout with Media Queries */
@media screen and (max-width: 768px) {
  table {
    width: 100%;
    overflow-x: auto;
  }
  th, td {
    min-width: 120px;
  }
}

Media queries are a fundamental tool for creating responsive and adaptive designs in CSS. By using examples that range from basic adjustments to more complex layouts, you can gain a comprehensive understanding of how media queries work. These examples showcase the flexibility and power of media queries in crafting responsive designs for a diverse range of scenarios. Happy Coding! ❤️