CSS Media Queries: Top Interview Questions & Example Scenarios — Questions & Answers

This quiz contains 10 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: Understanding Media Queries

   Which of the following best describes what a CSS media query is used for in web design?

   • A. Applying styles based on device characteristics like screen size and orientation.
   • B. Creating animations for user interactions.
   • C. Storing user data across web pages.
   • D. Embedding fonts from external sources.
   • E. Increasing website loading speed directly.
   Show correct answer

   Correct answer: A. Applying styles based on device characteristics like screen size and orientation.

2. Question 2: Media Types

   In the media query '@media print { ... }', what does the 'print' part specify?

   • A. The query runs only for printed documents.
   • B. The code will create a pop-up message.
   • C. The style applies to mobile devices only.
   • D. It indicates the text should be bold.
   • E. It restricts styles to portrait orientation.
   Show correct answer

   Correct answer: A. The query runs only for printed documents.

3. Question 3: Common Media Features

   Which of the following is a valid media feature you can target in a media query for responsive design?

   • A. max-width
   • B. font-family
   • C. text-align
   • D. hover-color
   • E. data-src
   Show correct answer

   Correct answer: A. max-width

4. Question 4: Combining Media Features

   How do you combine multiple conditions, such as screen width and orientation, in a single media query?

   • A. By using the 'and' keyword between features.
   • B. By separating conditions with a semicolon (;).
   • C. By placing both conditions within parentheses without any keyword.
   • D. By writing each condition in a separate media query.
   • E. By using the 'with' keyword.
   Show correct answer

   Correct answer: A. By using the 'and' keyword between features.

5. Question 5: Logical Operators

   Which operator allows you to write a media query that only applies if the condition is NOT met?

   • A. not
   • B. on
   • C. in
   • D. skip
   • E. nor
   Show correct answer

   Correct answer: A. not

6. Question 6: Breakpoints in Responsive Design

   What are 'breakpoints' in the context of CSS media queries?

   • A. Specific screen widths where the layout should change.
   • B. The points where a browser starts to lag.
   • C. The maximum number of styles allowed.
   • D. Predefined font sizes for mobile devices.
   • E. Dividers for separating HTML elements.
   Show correct answer

   Correct answer: A. Specific screen widths where the layout should change.

7. Question 7: Placing Media Queries

   If you want to change the style of a '.container' class only for screens smaller than 600px, what is the correct way to nest the CSS?

   • A. Place the rules for '.container' inside a '@media (max-width: 600px)' block.
   • B. Put the '@media' rule inside the '.container' selector.
   • C. Use 'container: (max-width: 600px) { ... }' directly.
   • D. Only add 'max-width' to the '.container' class and it will work automatically.
   • E. Use '!important' after every style property.
   Show correct answer

   Correct answer: A. Place the rules for '.container' inside a '@media (max-width: 600px)' block.

8. Question 8: Best Practices

   Which is considered a good practice when writing media queries for responsive design?

   • A. Use 'max-width' for breakpoints and follow a mobile-first approach.
   • B. Always use fixed pixel values for all elements.
   • C. Avoid testing your design on different devices.
   • D. Only focus on desktop layouts.
   • E. Write overlapping queries for each device brand.
   Show correct answer

   Correct answer: A. Use 'max-width' for breakpoints and follow a mobile-first approach.

9. Question 9: Media Queries vs Responsive Images

   What is a main difference between CSS media queries and responsive images?

   • A. Media queries change CSS styles, while responsive images load images based on device conditions.
   • B. Media queries work only with photos, not layout.
   • C. Responsive images only affect fonts, not visuals.
   • D. Both must always be used together.
   • E. Media queries require JavaScript, responsive images do not.
   Show correct answer

   Correct answer: A. Media queries change CSS styles, while responsive images load images based on device conditions.

10. Question 10: Media Queries vs Frameworks

    How do custom media queries differ from using predefined CSS framework classes for responsiveness?

    • A. Media queries offer more precise control, while frameworks use preset classes.
    • B. Frameworks allow unlimited customization, media queries do not.
    • C. Both approaches produce identical code with same results automatically.
    • D. Framework classes require no CSS knowledge at all.
    • E. Custom media queries are only for print layouts.
    Show correct answer

    Correct answer: A. Media queries offer more precise control, while frameworks use preset classes.