In a media query, which feature is commonly used to apply styles for smaller viewports?

In a media query, which feature is commonly used to apply styles for smaller viewports?

• A. Max-width
• B. Min-height
• C. Width
• D. Orientation

Answer: (A)

Targeting smaller viewports in CSS is typically done with a max-width media query. This feature applies styles when the viewport width is at or below a chosen value, making it ideal for phones and small tablets. For example, using a rule like @media (max-width: 600px) { ... } ensures the enclosed styles kick in only on narrow screens, allowing you to rearrange layout, increase tap targets, or adjust font sizes for readability. Min-height would respond to vertical space rather than horizontal space, so it’s not the primary tool for adapting to smaller screens. The width feature can be used, but it targets a specific width rather than a range, making it less flexible for the wide variety of small devices. Orientation switches based on portrait or landscape mode, which isn’t about the actual width available and thus isn’t the standard approach for styling for smaller viewports.

Targeting smaller viewports in CSS is typically done with a max-width media query. This feature applies styles when the viewport width is at or below a chosen value, making it ideal for phones and small tablets. For example, using a rule like @media (max-width: 600px) { ... } ensures the enclosed styles kick in only on narrow screens, allowing you to rearrange layout, increase tap targets, or adjust font sizes for readability.

Min-height would respond to vertical space rather than horizontal space, so it’s not the primary tool for adapting to smaller screens. The width feature can be used, but it targets a specific width rather than a range, making it less flexible for the wide variety of small devices. Orientation switches based on portrait or landscape mode, which isn’t about the actual width available and thus isn’t the standard approach for styling for smaller viewports.