Responsive Design — Interview Questions & Answers

Ques: What is Responsive Web Design (RWD)?

Ans: Responsive Web Design means building websites that automatically adjust their layout and appearance to fit different screen sizes — desktop, tablet, or mobile.

Ques: What are the main techniques used for Responsive Design?

1. Fluid layouts using % or fr instead of fixed px.
2. Flexible images/videos that scale with containers.
3. Media queries to apply different styles based on device width.
4. Responsive units like vw, vh, em, rem.
5. Modern CSS features — Grid, Flexbox, and Container Queries.

Ques: What are Media Queries in CSS?

Ans: Media queries allow you to apply styles conditionally based on device features (like width, height, orientation, etc.).

Example:

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

Ques: What is the difference between min-width and max-width?

Property	Description	Example
min-width	Applies when screen is wider than the value	@media (min-width: 600px)
max-width	Applies when screen is narrower than the value	@media (max-width: 600px)

Ques: What is the Mobile-First Design approach?

Ans: In mobile-first, you design for small screens first, then add styles for larger screens using min-width media queries.

Example:

p { font-size: 14px; } /* Mobile default */
@media (min-width: 768px) {
  p { font-size: 18px; } /* Tablets and above */
}

Ques: What are Viewport Units in CSS?

Ans: Viewport units are relative to the browser window size.

Unit	Meaning	Example
vw	1% of viewport width	width: 50vw;
vh	1% of viewport height	height: 100vh;
vmin	Smaller of vw or vh	font-size: 5vmin;
vmax	Larger of vw or vh	width: 100vmax;

Ques: What are Flexible Images and Videos?

Ans: Flexible media scales automatically to fit its container using max-width: 100%.

Example:

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

Ques: What is the difference between Responsive and Adaptive Design?

Feature	Responsive Design	Adaptive Design
Layout	Fluid & flexible	Fixed breakpoints
CSS	Media queries	Separate layouts per device
Behavior	Adjusts smoothly	Switches abruptly
Maintenance	Easier	Harder (multiple versions)

Ques: What is a Breakpoint in Responsive Design?

Ans: A breakpoint is a specific screen width where the layout changes to better fit the device.

Example:

@media (max-width: 1024px) { ... }  /* Tablet */
@media (max-width: 768px) { ... }   /* Mobile */

Common breakpoints:

• 1200px → Desktops
• 992px → Laptops
• 768px → Tablets
• 480px → Mobiles

Ques: What are Container Queries in CSS?

Ans: Container Queries allow elements to respond to the size of their parent container, not the entire viewport.

Example:

@container (min-width: 500px) {
  .card { flex-direction: row; }
}

Ques: What are Responsive Frameworks?

Ans: Frameworks like Bootstrap, Tailwind CSS, and Foundation provide ready-made responsive grids and utilities.

Example (Bootstrap):

<div class="col-md-6 col-lg-4"></div>

Ques: How do you make a responsive navigation bar?

• Use Flexbox or Grid for layout.
• Hide/show menu with CSS or JS based on screen size.
• Use media queries to convert horizontal nav to a hamburger menu.

Example:

nav ul { display: flex; }
@media (max-width: 768px) {
  nav ul { display: none; }
  .menu-icon { display: block; }
}

Ques: What is Responsive Typography?

Ans: Font sizes adjust based on screen size using relative units (em, rem, vw) or clamp().

Example:

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}