CSS Media Queries: Challenging Interview Questions with Examples Quiz

1. Purpose of Media Queries

   Which option best describes how CSS media queries enable responsive design? For example, consider adapting a website layout for smartphones and desktops.

   1. They let you apply CSS rules based on device characteristics such as width or orientation.
   2. They provide JavaScript functions to handle browser resizing.
   3. They can only switch between light and dark themes automatically.
   4. They trigger alert messages based on user input.
   5. They exclusively optimize images for different network speeds.

2. Media Types Syntax

   How would you write a media query that applies styles only for print devices?

   1. @media print { /* styles */ }
   2. @media paper { /* styles */ }
   3. @media device:print { /* styles */ }
   4. @media printed { /* styles */ }
   5. @media (print) { /* styles */ }

3. Combining Media Features

   Given the desire to target screens in landscape orientation with a maximum width of 990px, which media query is correct?

   1. @media (max-width: 990px) and (orientation: landscape) { }
   2. @media (max-width: 990px), (orientation: landscape) { }
   3. @media [max-width: 990px] u0026 [orientation: landscape] { }
   4. @media (maxwidth: 990px) and (orientation: landscape) { }
   5. @media screen and orientation: landscape and max-width: 990px { }

4. Logical Operators in Media Queries

   Which logical operator would you use in a media query to apply CSS only if multiple conditions are simultaneously true?

   1. and
   2. or
   3. not
   4. nor
   5. only

5. Breakpoints in Responsive Design

   In responsive design, what is a 'breakpoint'? For example, changing from two columns to one when the screen becomes narrower.

   1. A defined screen width where the website layout changes
   2. A CSS property that breaks the stylesheet into pieces
   3. A JavaScript event fired on screen resize
   4. A browser tool used to debug layouts
   5. A point where server-side rendering stops

6. Mobile-First Approach

   Which code snippet demonstrates a mobile-first approach to media queries?

   1. .container { width: 100%; } @media (min-width: 600px) { .container { width: 50%; } }
   2. @media (max-width: 600px) { .container { width: 100%; } } .container { width: 50%; }
   3. .container { width: 100%; } @media (max-width: 600px) { .container { width: 50%; } }
   4. @media (min-width: 600px) { .container { width: 100%; } } .container { width: 50%; }
   5. @media (min-width: 600px) and (max-width: 800px) { .container { width: 100%; } }

7. Nesting Media Queries

   How can you apply a CSS media query to affect only a specific class, for example, '.wrapper'?

   1. .wrapper { /* default styles */ } @media (max-width: 800px) { .wrapper { /* responsive styles */ } }
   2. @media (max-width: 800px) and (.wrapper) { /* styles */ }
   3. .wrapper @media (max-width: 800px) { /* responsive styles */ }
   4. .wrapper { @media (max-width: 800px) { /* responsive styles */ } }
   5. @media (.wrapper) and (max-width: 800px) { /* styles */ }

8. Common Media Features

   Which of the following is NOT a valid media feature for use in a CSS media query?

   1. device-width
   2. max-width
   3. orientation
   4. aspect-ratio
   5. text-size

9. Media Queries vs Responsive Images

   How does a CSS media query differ from an HTML responsive image solution?

   1. Media queries change CSS styles; responsive images load optimized image assets.
   2. Media queries optimize images only for mobile devices.
   3. Responsive images are controlled with @media rules in CSS.
   4. Media queries require JavaScript to load different images.
   5. Media queries and responsive images are terms for the same technique.

10. Good Practices with Media Queries

    Which practice is recommended when defining media queries for a responsive website?

    1. Use relative units and test on multiple real devices.
    2. Always use fixed pixel values for breakpoints.
    3. Write separate stylesheets for every possible device.
    4. Set breakpoints based only on device brand.
    5. Avoid using min-width in media queries.