Top 30 CSS Media Queries Interview Questions and Answers

Learn and master the top CSS Media Queries interview questions along with detailed answers and code snippets

1. What are CSS Media Queries?
   CSS Media Queries are a feature in CSS that allow you to apply different styles based on the characteristics of the device or viewport, such as screen size, resolution, orientation, etc.
   
2. How do you write a basic media query in CSS?
   A basic media query consists of an @media rule followed by a condition enclosed in parentheses. Here’s an example of a media query for screens with a maximum width of 600 pixels:

   @media (max-width: 600px) {
     /* CSS styles for screens with max width of 600px */
   }

3. How do you apply styles specifically for mobile devices?
   You can use media queries to target mobile devices by specifying the maximum width for mobile screens. For example:

   @media (max-width: 480px) {
     /* CSS styles for mobile devices */
   }

4. How do you apply styles specifically for desktop devices?
   You can use media queries to target desktop devices by specifying the minimum width for desktop screens. For example:

   @media (min-width: 1024px) {
     /* CSS styles for desktop devices */
   }

5. How do you apply styles based on device orientation?
   You can use the orientation property within a media query to target devices in portrait or landscape mode. For example:

   @media (orientation: landscape) {
     /* CSS styles for landscape mode */
   }

   @media (orientation: portrait) {
     /* CSS styles for portrait mode */
   }

6. How do you apply styles for high-resolution displays (Retina)?
   You can use the min-resolution property within a media query to target high-resolution displays. For example, targeting Retina displays with a pixel density of 2x:

   @media (min-resolution: 192dpi) {
     /* CSS styles for high-resolution displays */
   }

7. How do you apply styles for specific screen resolutions?
   You can use the min-width and max-width properties within a media query to target specific screen resolutions. For example, targeting screens between 768px and 1024px:

   @media (min-width: 768px) and (max-width: 1024px) {
     /* CSS styles for screens between 768px and 1024px */
   }

8. How do you apply styles for both landscape and portrait orientations?
   You can combine media queries to apply styles for both landscape and portrait orientations. For example:

   @media (orientation: landscape), (orientation: portrait) {
     /* CSS styles for both landscape and portrait orientations */
   }

9. How do you apply styles for touch-enabled devices?
   You can use the pointer media feature within a media query to target touch-enabled devices. For example:

   @media (pointer: coarse) {
     /* CSS styles for touch-enabled devices */
   }

10. How do you apply styles for devices with a specific aspect ratio?
    You can use the aspect-ratio media feature within a media query to target devices with a specific aspect ratio. For example, targeting devices with an aspect ratio of 16:9:

   @media (aspect-ratio: 16/9) {
     /* CSS styles for devices with aspect ratio of 16:9 */
   }

11. How do you apply styles for devices with a specific pixel density?
    You can use the min-resolution media feature within a media query to target devices with a specific pixel density. For example, targeting devices with a pixel density of 2x:

   @media (min-resolution: 192dpi) {
     /* CSS styles for devices with pixel density of 2x */
   }

12. How do you apply styles specifically for print media?
    You can use the print media type within a media query to target styles specifically for printing. For example:

   @media print {
     /* CSS styles for print media */
   }

13. How do you apply styles for dark mode?
    You can use the prefers-color-scheme media feature within a media query to target devices with dark mode enabled. For example:

   @media (prefers-color-scheme: dark) {
     /* CSS styles for devices with dark mode enabled */
   }

14. How do you apply styles for devices with a specific display mode (e.g., fullscreen)?
    You can use the display-mode media feature within a media query to target devices with a specific display mode. For example, targeting devices in fullscreen mode:

   @media (display-mode: fullscreen) {
     /* CSS styles for devices in fullscreen mode */
   }

15. How do you apply styles based on the user’s preferred language?
    You can use the prefers-reduced-motion media feature within a media query to target devices where the user prefers reduced motion. For example:

   @media (prefers-reduced-motion: reduce) {
     /* CSS styles for devices where user prefers reduced motion */
   }

16. How do you apply styles for devices with a specific color gamut?
    You can use the color-gamut media feature within a media query to target devices with a specific color gamut. For example, targeting devices with a wide color gamut:

   @media (color-gamut: p3) {
     /* CSS styles for devices with wide color gamut */
   }

17. How do you apply styles specifically for devices with a hover capability?
    You can use the hover media feature within a media query to target devices with a hover capability. For example:

   @media (hover: hover) {
     /* CSS styles for devices with hover capability */
   }

18. How do you apply styles specifically for devices with a pointer capability?
    You can use the pointer media feature within a media query to target devices with a pointer capability. For example:

   @media (pointer: fine) {
     /* CSS styles for devices with fine pointer capability */
   }

19. How do you apply styles for devices with a specific device width and height?
    You can use the device-width and device-height properties within a media query to target devices with a specific device width and height. For example, targeting devices with a device width of 320px and height of 480px:

   @media (device-width: 320px) and (device-height: 480px) {
     /* CSS styles for devices with specific device width and height */
   }

20. How do you apply styles based on the user’s preferred color scheme?
    You can use the prefers-color-scheme media feature within a media query to target devices based on the user’s preferred color scheme. For example:

   @media (prefers-color-scheme: light) {
     /* CSS styles for devices with

 light color scheme preference */
   }

   @media (prefers-color-scheme: dark) {
     /* CSS styles for devices with dark color scheme preference */
   }

21. How do you apply styles specifically for devices with a specific device aspect ratio?
    You can use the device-aspect-ratio media feature within a media query to target devices with a specific device aspect ratio. For example, targeting devices with a device aspect ratio of 16:9:

   @media (device-aspect-ratio: 16/9) {
     /* CSS styles for devices with specific device aspect ratio */
   }

22. How do you apply styles specifically for devices with a specific resolution?
    You can use the resolution media feature within a media query to target devices with a specific resolution. For example, targeting devices with a resolution of 300dpi:

   @media (resolution: 300dpi) {
     /* CSS styles for devices with specific resolution */
   }

23. How do you apply styles specifically for devices with a specific scan type?
    You can use the scan media feature within a media query to target devices with a specific scan type. For example, targeting devices with a progressive scan:

   @media (scan: progressive) {
     /* CSS styles for devices with progressive scan type */
   }

24. How do you apply styles specifically for devices with a specific aspect ratio and resolution?
    You can combine the device-aspect-ratio and resolution media features within a media query to target devices with a specific aspect ratio and resolution.
    
    For example, targeting devices with an aspect ratio of 16:9 and a resolution of 300dpi:

   @media (device-aspect-ratio: 16/9) and (resolution: 300dpi) {
     /* CSS styles for devices with specific aspect ratio and resolution */
   }

25. How do you apply styles specifically for devices with a specific aspect ratio and color gamut?
    You can combine the device-aspect-ratio and color-gamut media features within a media query to target devices with a specific aspect ratio and color gamut.
    
    For example, targeting devices with an aspect ratio of 16:9 and a wide color gamut:

   @media (device-aspect-ratio: 16/9) and (color-gamut: p3) {
     /* CSS styles for devices with specific aspect ratio and color gamut */
   }

26. How do you apply styles specifically for devices with a specific resolution and hover capability?
    You can combine the resolution and hover media features within a media query to target devices with a specific resolution and hover capability.
    
    For example, targeting devices with a resolution of 300dpi and hover capability:

   @media (resolution: 300dpi) and (hover: hover) {
     /* CSS styles for devices with specific resolution and hover capability */
   }

27. How do you apply styles specifically for devices with a specific orientation and pointer capability?
    You can combine the orientation and pointer media features within a media query to target devices with a specific orientation and pointer capability.
    
    For example, targeting devices in landscape orientation and with fine pointer capability:

   @media (orientation: landscape) and (pointer: fine) {
     /* CSS styles for devices in landscape orientation and with fine pointer capability */
   }

28. How do you apply styles specifically for devices with a specific color gamut and prefers reduced motion?
    You can combine the color-gamut and prefers-reduced-motion media features within a media query to target devices with a specific color gamut and where the user prefers reduced motion.
    
    For example, targeting devices with a wide color gamut and reduced motion preference:

   @media (color-gamut: p3) and (prefers-reduced-motion: reduce) {
     /* CSS styles for devices with wide color gamut and reduced motion preference */
   }

29. How do you apply styles specifically for devices with a specific display mode and prefers dark color scheme?
    You can combine the display-mode and prefers-color-scheme media features within a media query to target devices with a specific display mode and where the user prefers a dark color scheme.
    
    For example, targeting devices in fullscreen mode and with dark color scheme preference:

   @media (display-mode: fullscreen) and (prefers-color-scheme: dark) {
     /* CSS styles for devices in fullscreen mode and with dark color scheme preference */
   }

30. How do you apply styles specifically for devices with a specific device width, prefers landscape orientation, and hover capability?
    You can combine the device-width, orientation, and hover media features within a media query to target devices with a specific device width, prefers landscape orientation, and hover capability.
    
    For example, targeting devices with a device width of 768px, prefers landscape orientation, and hover capability:

   @media (device-width: 768px) and (orientation: landscape) and (hover: hover) {
     /* CSS styles for devices with specific device width, prefers landscape orientation, and hover capability */
   }