Responsive Design & Media Queries Flashcards

Which media feature queries the resolution of the output device?

Answer: resolution

The resolution media feature targets device pixel density, often in dpi or dppx.

What does '@media (hover: none)' typically target?

Answer: Touch devices without a hovering pointer

hover: none matches devices whose primary input cannot hover, like touchscreens.

Which at-rule is the modern alternative to media queries for styling based on a parent element's size?

Answer: @container

Container queries (@container) style elements based on their container's size.

What does 'prefers-reduced-motion: reduce' indicate?

Answer: The user wants minimized animations

It signals the user prefers reduced or no animation for accessibility.

Which media type targets printed output in a media query?

Answer: print

The print media type applies styles when the page is printed.

In '@media screen and (min-width: 768px) and (max-width: 1024px)', which devices match?

Answer: Screens between 768px and 1024px wide

Both conditions must be true, so only widths in the 768–1024px range match.

What is the purpose of the 'sizes' attribute alongside srcset?

Answer: Tells the browser how wide the image will display at each breakpoint

The sizes attribute helps the browser pick the right srcset candidate per layout width.