Explore CSS media queries by answering questions about responsive design techniques, syntax, and practical scenarios. This quiz helps solidify foundational knowledge of CSS media queries, breakpoints, and related rules for modern web layouts.
Which CSS structure correctly targets devices with a maximum screen width of 600 pixels?
Explanation: The correct answer uses parentheses and the max-width property to define the boundary for 600 pixels. The other options are incorrect due to syntax errors: option two is missing parentheses, option three misplaces the media type and uses an incorrect operator, and option four has the syntax reversed. Only the first option follows proper CSS media query formatting.
What is the correct way to write a CSS media query that targets screens wider than 400px and in landscape orientation?
Explanation: The correct answer uses the 'and' keyword to join both conditions with proper parentheses. Option two incorrectly uses a comma, which separates queries instead of combining them. Option three uses the wrong syntax and symbols, and option four omits necessary parentheses. Only the first option properly combines both requirements.
In responsive design, which term describes the specific widths at which a layout changes using media queries?
Explanation: Breakpoints are the specific points where the layout adapts to different screen sizes via media queries. Keyframes relate to CSS animations, gradients to background styling, and anchors to hyperlinks. Only 'breakpoints' directly refers to thresholds for changes in responsive layouts.
Which media type should be used in a media query to specifically target printed documents?
Explanation: The 'print' media type is designed for printed pages, allowing styles to be applied when content is sent to printers. 'Projection' was intended for projectors but is rarely used, 'audio' is not a valid media type in CSS, and 'screen' applies to visual screens, not printing. Thus, only 'print' is correct for this scenario.
If you want a style to apply when the browser's visible area is at least 800 pixels wide, which media feature should you use?
Explanation: 'min-width' refers to the width of the viewport (browser's visible area), which is commonly used for responsive layouts. 'min-device-width' and 'max-device-width' reference the entire device screen, which is less relevant for modern responsive design. 'min-pixel-width' is not a valid CSS media feature. Therefore, 'min-width' is the proper choice.
Which media feature allows you to apply styles when a device is in portrait mode?
Explanation: 'orientation: portrait' is the correct media feature for targeting portrait orientation in CSS. The other options use invalid or nonexistent media features. 'display', 'mode', and 'type' are not recognized for targeting orientation in CSS media queries.
Which media type should you use to target styles at all visual screens regardless of device?
Explanation: The 'screen' media type targets all devices with a visual screen, including monitors, tablets, and mobile phones. 'speech' targets screen readers, 'all' can apply to every device but is rarely used explicitly, and 'visual' is not a valid media type. 'Screen' is most appropriate for styling visual devices in general.
Where in a CSS file should you generally place media queries for best practices in responsive design?
Explanation: Placing media queries after base styles allows overrides and ensures that responsive changes are applied appropriately depending on the conditions met. Placing queries at the top or mixed throughout can lead to conflicting or less maintainable code, and putting them between every rule is inefficient and hard to manage. Therefore, 'after the base styles' is considered best practice.
To adjust images for devices with high pixel density, which media feature should you use in your query?
Explanation: The 'min-resolution' feature targets devices with high pixel density, such as many smartphones and tablets. 'min-height' relates to vertical size, not resolution. 'device-angle' and 'dpi-width' are not valid CSS media features. Only 'min-resolution' serves the purpose of targeting high-resolution screens.
What keyword would you use to apply a style if either of two media conditions is true, combining them in a media query?
Explanation: The 'or' operator (represented by a comma in CSS) combines two media conditions so the styles apply if either is true. 'and' requires both conditions to be true, 'with' and 'plus' are not recognized operators in this context. While 'or' is not literally written, using a comma acts as a logical 'or' in CSS.