HTML & CSS Interview Question #101

What is responsive web design?

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

Quick Interview Answer

Responsive web design is an approach in which a website adapts its layout and presentation to different viewport sizes, device capabilities, and available space. It commonly combines flexible layouts, flexible media, and conditional CSS such as media or container queries.

Detailed Explanation

A responsive design should not simply shrink a desktop page. Content hierarchy, navigation, touch targets, typography, images, and component behavior should remain usable across phones, tablets, laptops, and larger screens.

Code Example

.container {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto;
}

img {
    max-width: 100%;
    height: auto;
}