CSS Interview Questions

Media queries are a feature of CSS that allows you to apply different styles to elements based on the characteristics of the user's device, such as the screen size, resolution, orientation, or even the type of device (e.g., print or screen). Media queries enable responsive design, allowing websites to adapt their layout and appearance to different screen sizes and devices, ensuring a better user experience across a wide range of devices.

How Do Media Queries Work?

Media queries consist of a media type (such as screen, print, or all) and one or more expressions that check for certain conditions, such as the width of the viewport. Depending on whether the conditions in the media query are met (i.e., they evaluate to true), the specified CSS rules are applied.

Basic Syntax of Media Queries

The basic syntax of a media query looks like this:

@media media-type and (media-feature: value) {
    /* CSS rules to apply if the media query conditions are met */
}

• media-type: Specifies the type of device (e.g., screen, print, all). all applies to all devices.
• media-feature: value: An expression that checks a condition, such as the width of the viewport. Examples include min-width, max-width, orientation, resolution, etc.
• and: Used to combine multiple conditions.

Example of a Media Query

Here’s an example that changes the background color of a page based on the screen width:

/* Default styles for all devices */
body {
    background-color: white;
    color: black;
}

/* Styles for screens wider than 600px */
@media screen and (min-width: 600px) {
    body {
        background-color: lightblue;
    }
}

/* Styles for screens narrower than 600px */
@media screen and (max-width: 600px) {
    body {
        background-color: lightgreen;
    }
}

How It Works:

• Default Styles: The body element has a white background and black text by default.
• min-width: 600px: If the screen width is 600 pixels or wider, the background color changes to light blue.
• max-width: 600px: If the screen width is 600 pixels or narrower, the background color changes to light green.

Common Media Features

Here are some commonly used media features in media queries:

1. min-width and max-width:

   • Used to apply styles based on the minimum or maximum width of the viewport.
   • Example: @media (min-width: 768px) applies styles when the viewport is 768 pixels or wider.

2. min-height and max-height:

   • Similar to min-width and max-width, but apply based on the height of the viewport.
   • Example: @media (max-height: 500px) applies styles when the viewport height is 500 pixels or less.

3. orientation:

   • Targets the orientation of the device.
   • Example: @media (orientation: landscape) applies styles when the device is in landscape mode.
   • Example: @media (orientation: portrait) applies styles when the device is in portrait mode.

4. resolution:

   • Applies styles based on the resolution of the device, typically in dots per inch (DPI).
   • Example: @media (min-resolution: 300dpi) applies styles on devices with a resolution of 300 DPI or higher.

5. aspect-ratio:

   • Targets the aspect ratio of the device's screen.
   • Example: @media (aspect-ratio: 16/9) applies styles when the screen has a 16:9 aspect ratio.

6. hover:

   • Checks if the device supports hover interactions.
   • Example: @media (hover: hover) applies styles when the device allows hover interactions (e.g., a mouse pointer).

7. prefers-color-scheme:

   • Checks the user's system color scheme preference (light or dark mode).
   • Example: @media (prefers-color-scheme: dark) applies styles when the user prefers a dark color scheme.

Responsive Design with Media Queries

Media queries are a fundamental tool in responsive web design, allowing you to create layouts that adapt to different screen sizes and devices. A typical responsive design might include breakpoints where the layout changes based on screen width:

/* Base styles (mobile-first) */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet styles (min-width: 768px) */
@media screen and (min-width: 768px) {
    .container {
        width: 80%;
        margin: 0 auto;
    }
}

/* Desktop styles (min-width: 1024px) */
@media screen and (min-width: 1024px) {
    .container {
        width: 60%;
    }
}

• Mobile-First Approach: Base styles are applied to all devices, and media queries are used to apply styles for larger screens.
• Breakpoints: At 768px (tablet) and 1024px (desktop), the container's width changes to accommodate larger screens.

Summary

• Media Queries: Allow you to apply CSS rules based on the characteristics of the user's device, such as screen size, orientation, or resolution.
• Responsive Design: Media queries are essential for creating responsive designs that adapt to different devices and screen sizes.
• Syntax: Media queries combine a media type (like screen) with media features (like min-width) to conditionally apply styles.
• Usage: Commonly used for adjusting layouts, typography, and other styles at different screen widths and orientations.