Media Queries in Depth

A media query is a CSS technique used to apply styles based on the characteristics of the user's device, such as screen size, resolution, orientation, or other properties. Media queries are essential for creating responsive designs that adapt to different screen sizes and devices.

Basic Syntax

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

Common Media Query Examples

1. Targeting Screen Sizes

Mobile Devices:

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

Tablets:

@media (min-width: 601px) and (max-width: 1024px) {
  body {
    background-color: lightgreen;
  }
}

Desktops:

@media (min-width: 1025px) {
  body {
    background-color: lightyellow;
  }
}

2. Orientation

Portrait Mode:

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

Landscape Mode:

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

3. High-Resolution Screens (Retina Displays)

Targeting High DPI Screens:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img {
    width: 100%;
    height: auto;
  }
}

Best Practices

Mobile-First Design:

Start with styles for smaller screens and add media queries for larger screens.

body {
  font-size: 14px;
}

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

Avoid Overlapping Breakpoints:
- Ensure breakpoints do not overlap to avoid conflicting styles.
Test Across Devices:
- Use browser developer tools to test your media queries on different screen sizes and orientations.

Responsive Breakpoints (Common Standards)

Device	Breakpoint
Mobile (Small)	`max-width: 600px`
Tablet (Medium)	`min-width: 601px` and `max-width: 1024px`
Desktop (Large)	`min-width: 1025px`

Media Queries in Depth with SASS

SASS (Syntactically Awesome Stylesheets) enhances the use of media queries by providing features like variables, mixins, and nesting, making your CSS more modular and maintainable.

1. Basic Media Query in SASS

You can write media queries in SASS just like in plain CSS.

// Example: Basic Media Query
body {
  font-size: 16px;

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

2. Nesting Media Queries

SASS allows you to nest media queries inside selectors, making the code more readable and organized.

// Example: Nested Media Query
.container {
  padding: 20px;

  @media (max-width: 768px) {
    padding: 10px;
  }
}

3. Using Variables in Media Queries

You can define breakpoints as variables to maintain consistency across your styles.

// Define Breakpoints
$mobile: 600px;
$tablet: 768px;

// Use Variables in Media Queries
.container {
  padding: 20px;

  @media (max-width: $mobile) {
    padding: 10px;
  }

  @media (max-width: $tablet) {
    padding: 15px;
  }
}

4. Media Query Mixins

Mixins in SASS allow you to reuse media query logic across multiple selectors.

// Define a Mixin for Breakpoints
@mixin respond-to($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == tablet {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == desktop {
    @media (min-width: 1024px) { @content; }
  }
}

// Use the Mixin
.container {
  padding: 20px;

  @include respond-to(mobile) {
    padding: 10px;
  }

  @include respond-to(tablet) {
    padding: 15px;
  }
}

5. Combining Media Queries

SASS allows you to combine multiple media queries for better organization.

// Example: Combining Media Queries
$mobile: 600px;
$tablet: 768px;

.container {
  padding: 20px;

  @media (max-width: $mobile), (max-width: $tablet) {
    padding: 10px;
  }
}

6. Using Media Queries with SASS Maps

SASS maps allow you to store breakpoints in a structured way and use them dynamically.

// Define Breakpoints as a Map
$breakpoints: (
  mobile: 600px,
  tablet: 768px,
  desktop: 1024px
);

// Mixin to Use Breakpoints from the Map
@mixin respond-to($breakpoint) {
  @media (max-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

// Use the Mixin
.container {
  padding: 20px;

  @include respond-to(mobile) {
    padding: 10px;
  }

  @include respond-to(tablet) {
    padding: 15px;
  }
}

7. Orientation Media Queries

You can target specific orientations like portrait or landscape.

// Example: Orientation Media Queries
.container {
  @media (orientation: portrait) {
    background-color: lightblue;
  }

  @media (orientation: landscape) {
    background-color: lightgreen;
  }
}

8. High-Resolution Media Queries

Target high-resolution screens (e.g., Retina displays).

// Example: High-Resolution Media Query
.container {
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    background-image: url('high-res-image.png');
  }
}

9. Responsive Typography

You can use media queries to adjust font sizes for different screen sizes.

// Example: Responsive Typography
h1 {
  font-size: 32px;

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

  @media (max-width: 600px) {
    font-size: 24px;
  }
}

10. Example: Full Responsive Design with SASS

Here’s a complete example of a responsive design using SASS:

// Define Breakpoints
$breakpoints: (
  mobile: 600px,
  tablet: 768px,
  desktop: 1024px
);

// Mixin for Breakpoints
@mixin respond-to($breakpoint) {
  @media (max-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

// Styles
.container {
  padding: 20px;
  font-size: 16px;

  @include respond-to(mobile) {
    padding: 10px;
    font-size: 14px;
  }

  @include respond-to(tablet) {
    padding: 15px;
    font-size: 15px;
  }

  @include respond-to(desktop) {
    padding: 25px;
    font-size: 18px;
  }
}

Best Practices

Mobile-First Design:
- Start with styles for smaller screens and add media queries for larger screens.
Use Variables and Mixins:
- Define breakpoints as variables or maps for consistency.
- Use mixins to avoid repetitive code.
Test Across Devices:
- Use browser developer tools to test your media queries on different screen sizes.
Keep Media Queries Organized:
- Group related media queries together for better maintainability.

Tools for Testing Media Queries

Browser Developer Tools:
- Use the "Responsive Design Mode" in Chrome, Firefox, or Edge.
Online Tools:
- Screenfly
- Responsinator

By leveraging SASS features like variables, mixins, and maps, you can write clean, reusable, and maintainable media queries for responsive designs.

Media Query with Retina HD monitors

To handle Retina HD monitors or high DPI screens in CSS, you can use the @media query with the resolution feature. Retina displays have a higher pixel density, so you can target them by checking the device pixel ratio (DPR) or the resolution in dots per inch (DPI).

Using `min-resolution` or `min-device-pixel-ratio`

Example: Targeting Retina Displays

/* Target Retina displays with high DPI */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .retina {
    background-image: url('image@2x.png'); /* High-resolution image */
    font-size: 1.2rem; /* Adjust font size for better readability */
  }
}

Explanation

-webkit-min-device-pixel-ratio:
- Targets devices with a minimum device pixel ratio (DPR) of 2 or higher.
- Commonly used for Retina displays.
min-resolution:
- Targets devices with a minimum resolution of 192dpi (dots per inch).
- Equivalent to a DPR of 2 (since standard screens are 96dpi).
Fallback for Cross-Browser Support:
- Combine both -webkit-min-device-pixel-ratio (for WebKit browsers like Safari) and min-resolution (for other browsers like Firefox).

Using `device-pixel-ratio` for Specific DPRs

You can also target specific DPRs for different Retina levels:

Example: Different DPR Levels

/* Standard Retina (DPR = 2) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .retina {
    background-image: url('image@2x.png');
  }
}

/* Super Retina (DPR = 3) */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .retina {
    background-image: url('image@3x.png');
  }
}

Handling Retina Images

To ensure images look sharp on Retina displays:

Use higher-resolution images (e.g., @2x or @3x versions).
Scale them down using CSS to fit the intended size.

Example: Retina Image Scaling

.retina {
  background-image: url('image@2x.png');
  background-size: 100px 100px; /* Scale down the high-res image */
  width: 100px;
  height: 100px;
}

Best Practices

Combine Media Queries:
- Use both -webkit-min-device-pixel-ratio and min-resolution for cross-browser compatibility.
Optimize Images:
- Use responsive images (srcset) or CSS background-size to serve high-resolution images only when needed.
Test Across Devices:
- Test your media queries on actual Retina devices to ensure proper rendering.

Conclusion

To handle Retina HD monitors in media queries:

Use @media with -webkit-min-device-pixel-ratio and min-resolution.
Serve high-resolution images and adjust styles for better readability.
Ensure cross-browser compatibility by combining multiple media query features.

Basic Syntax​

Common Media Query Examples​

1. Targeting Screen Sizes​

2. Orientation​

3. High-Resolution Screens (Retina Displays)​

Best Practices​

Responsive Breakpoints (Common Standards)​

Media Queries in Depth with SASS​

1. Basic Media Query in SASS​

2. Nesting Media Queries​

3. Using Variables in Media Queries​

4. Media Query Mixins​

5. Combining Media Queries​

6. Using Media Queries with SASS Maps​

7. Orientation Media Queries​

8. High-Resolution Media Queries​

9. Responsive Typography​

10. Example: Full Responsive Design with SASS​

Best Practices​

Tools for Testing Media Queries​

Media Query with Retina HD monitors​

Using min-resolution or min-device-pixel-ratio​

Example: Targeting Retina Displays​

Explanation​

Using device-pixel-ratio for Specific DPRs​

Example: Different DPR Levels​

Handling Retina Images​

Example: Retina Image Scaling​

Best Practices​

Conclusion​

Basic Syntax

Common Media Query Examples

1. Targeting Screen Sizes

2. Orientation

3. High-Resolution Screens (Retina Displays)

Best Practices

Responsive Breakpoints (Common Standards)

Media Queries in Depth with SASS

1. Basic Media Query in SASS

2. Nesting Media Queries

3. Using Variables in Media Queries

4. Media Query Mixins

5. Combining Media Queries

6. Using Media Queries with SASS Maps

7. Orientation Media Queries

8. High-Resolution Media Queries

9. Responsive Typography

10. Example: Full Responsive Design with SASS

Best Practices

Tools for Testing Media Queries

Media Query with Retina HD monitors

Using `min-resolution` or `min-device-pixel-ratio`

Example: Targeting Retina Displays

Explanation

Using `device-pixel-ratio` for Specific DPRs

Example: Different DPR Levels

Handling Retina Images

Example: Retina Image Scaling

Best Practices

Conclusion