Which technique allows CSS styles to respond to viewport size in Responsive Web Design?

• A. Media queries
• B. Flexbox
• C. CSS resets
• D. Animations

Answer: (A)

Media queries are the tool that makes CSS respond to the size of the viewport. They let you define conditions—like a maximum or minimum width, height, orientation, or resolution—and apply different CSS rules when those conditions are met. This lets you create breakpoints so typography, layout, and components adapt as the screen grows or shrinks. For example, you can set a base style for large screens and add a media query for smaller screens to adjust font sizes or hide side panels. Flexbox helps with flexible layouts within a given set of rules but doesn’t automatically switch styles based on viewport size. CSS resets normalize browser defaults, and animations add motion, but neither by itself makes styles respond to viewport changes.