10 Media Queries Interview Questions and Answers

Media queries are a cornerstone of responsive web design, allowing developers to create adaptable layouts that work seamlessly across a variety of devices and screen sizes. By using media queries, you can apply different styles based on the characteristics of the device, such as its width, height, orientation, and resolution. This ensures that your web content is accessible and visually appealing, regardless of how it is accessed.

This article offers a curated selection of media query-related questions and answers to help you prepare for your upcoming interview. By familiarizing yourself with these concepts, you’ll be better equipped to demonstrate your expertise in creating responsive and user-friendly web designs.

Media Queries Interview Questions and Answers

1. Write a basic media query that targets devices with a screen width of 768px or less.

Media queries in CSS allow styles to be applied based on device characteristics like width, height, or orientation. To target devices with a screen width of 768px or less, use:

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

This changes the background color to light blue for screens 768px wide or less, demonstrating responsive design.

2. How would you use media queries to apply different styles for print and screen media types? Provide an example.

Media queries enable different styles for various media types, such as screens and printers. This ensures content is appropriately presented in different contexts.

Example:

/* Styles for screen */
@media screen {
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        color: #333;
    }
}

/* Styles for print */
@media print {
    body {
        font-family: Times New Roman, serif;
        background-color: white;
        color: black;
    }
}

Here, @media screen styles apply to screens, while @media print styles apply to printed content, enhancing user experience across media types.

3. Write a media query that applies styles only when the device is in landscape orientation.

To apply styles only in landscape orientation, use the orientation media feature:

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
    }
}

This changes the background color to light blue when the device is in landscape mode.

4. How can you use media queries to support accessibility features, such as high contrast mode?

Media queries can support accessibility features like high contrast mode by detecting user preferences and applying suitable styles.

Example:

@media (prefers-contrast: high) {
    body {
        background-color: black;
        color: white;
    }

    a {
        color: yellow;
    }
}

This query checks for high contrast mode and applies styles to enhance readability, such as a black background and white text.

5. Write a media query that targets devices with a viewport height of less than 600px.

To target devices with a viewport height of less than 600px, use:

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

6. Write a media query that targets devices with both a minimum width of 480px and a maximum width of 1024px.

To target devices with a width between 480px and 1024px, use:

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

7. Explain the concept of mobile-first design and how it relates to media queries.

Mobile-first design prioritizes the mobile experience by designing for smaller screens first, then enhancing for larger screens. Media queries help implement this by allowing styles to adapt to various screen sizes.

Example:

/* Base styles for mobile devices */
body {
    font-size: 16px;
    padding: 10px;
}

/* Styles for tablets and larger screens */
@media (min-width: 768px) {
    body {
        font-size: 18px;
        padding: 20px;
    }
}

/* Styles for desktops and larger screens */
@media (min-width: 1024px) {
    body {
        font-size: 20px;
        padding: 30px;
    }
}

Base styles are defined for mobile, with media queries adjusting for larger screens.

8. Explain the difference between ’em’ and ‘px’ units in media queries and when to use each.

In media queries, em and px are units for defining breakpoints. px is an absolute unit, providing precise control, while em is relative, adapting to font size changes.

When to use each:

• Use px for precise control when design doesn’t need to adapt to different sizes or settings.
• Use em for flexible designs that adapt to various sizes, resolutions, and preferences.

9. How can you use media queries to handle different input methods, such as touch vs. mouse?

Media queries can handle different input methods like touch and mouse using pointer and hover features.

Example:

/* Styles for devices with a coarse pointer (e.g., touch screens) */
@media (pointer: coarse) {
    button {
        font-size: 18px;
        padding: 15px;
    }
}

/* Styles for devices with a fine pointer (e.g., mouse) */
@media (pointer: fine) {
    button {
        font-size: 14px;
        padding: 10px;
    }
}

/* Styles for devices that support hover (e.g., mouse) */
@media (hover: hover) {
    button:hover {
        background-color: lightblue;
    }
}

/* Styles for devices that do not support hover (e.g., touch screens) */
@media (hover: none) {
    button:active {
        background-color: lightblue;
    }
}

10. Describe how media queries can be used to optimize loading times and performance.

Media queries optimize loading times by ensuring only necessary resources are loaded for a device, useful in responsive design.

Example:

/* Default styles for all devices */
body {
    font-size: 16px;
}

/* Styles for devices with a maximum width of 600px */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

/* Styles for devices with a minimum width of 601px */
@media (min-width: 601px) {
    body {
        font-size: 18px;
    }
}

This adjusts font size based on screen width, ensuring readability without unnecessary styles.