Which practice uses CSS3 media queries to adapt a layout to different screen sizes?

Which practice uses CSS3 media queries to adapt a layout to different screen sizes?

• A. Fluid image
• B. W3C Guidelines
• C. Responsive design
• D. Mind map

Answer: (C)

Responsive design uses CSS3 media queries to adapt a layout to different screen sizes. Media queries let you apply different CSS rules based on the device’s viewport characteristics, such as width or orientation, so a page can switch from a multi-column layout on a large monitor to a single-column stack on a phone. This approach enables flexible grids, reordering content, and adjusting typography at defined breakpoints, keeping the design usable across devices. For example, you might hide a certain sidebar or change grid columns when the viewport is below a certain width. A fluid image is about scaling an image with its container and isn’t inherently about applying layout changes at different sizes. W3C Guidelines are general standards, not a specific practice for adapting layouts. A mind map is a diagramming method, not a responsive design technique.

Responsive design uses CSS3 media queries to adapt a layout to different screen sizes. Media queries let you apply different CSS rules based on the device’s viewport characteristics, such as width or orientation, so a page can switch from a multi-column layout on a large monitor to a single-column stack on a phone. This approach enables flexible grids, reordering content, and adjusting typography at defined breakpoints, keeping the design usable across devices. For example, you might hide a certain sidebar or change grid columns when the viewport is below a certain width.

A fluid image is about scaling an image with its container and isn’t inherently about applying layout changes at different sizes. W3C Guidelines are general standards, not a specific practice for adapting layouts. A mind map is a diagramming method, not a responsive design technique.