HTML & CSS Interview Question #102

What is a CSS media query?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

A media query conditionally applies CSS according to characteristics of the output environment, such as viewport width, orientation, resolution, or user preferences. Media queries are a core tool for responsive and adaptive presentation.

Detailed Explanation

Breakpoints should normally be chosen where the content or layout needs to change rather than being based only on specific device models.

Code Example

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .cards {
        grid-template-columns: 1fr;
    }
}