A em is based on parent font size; rem is based on root font size
B em is for margins; rem is for padding
C They are the same
D em is deprecated; rem is modern
Explanation: em units are relative to the parent element's font size, while rem units are relative to the root (html) element's font size, making rem more predictable for responsive designs.
A To store values that can be reused and changed in media queries
B To create JavaScript-like variables
C To store only colors
D To create CSS animations
Explanation: CSS Custom Properties allow you to store values and change them within media queries, making responsive design more maintainable and consistent.
A Making forms colorful
B Making form elements large enough for touch interaction
C Adding form animations
D Using complex validation
Explanation: Form elements must be large enough for touch interaction (at least 44px height) and properly spaced for mobile devices, which is a key responsive design consideration.
A Sets the viewport width equal to the device's screen width
B Sets the viewport width to a fixed value
C Sets the viewport width to half the device width
D Sets the viewport width to the desktop width
Explanation: The device-width value sets the viewport width to match the device's physical screen width, essential for proper responsive layout on mobile devices.
A Displaying all navigation links in a row
B Using a hamburger menu with JavaScript
C Hiding all navigation links
D Using a fixed sidebar
Explanation: Hamburger menus with JavaScript toggle are a common responsive navigation pattern that saves space on mobile while maintaining access to all links.
A It's not important
B It improves readability and usability across devices
C It makes websites faster
D It is only for aesthetics
Explanation: White space (or negative space) is crucial in responsive design as it improves readability, reduces cognitive load, and helps content breathe on all screen sizes.
A Positions the image within its container
B Sets the image in the center
C Adds a border to the image
D Changes image opacity
Explanation: object-position specifies the alignment of the content within the element's box, allowing you to control how images are positioned within their containers.
A A library of design patterns for different screen sizes
B A collection of static mockups
C A set of color swatches
D A font collection
Explanation: A responsive pattern library contains reusable design patterns (like navigation, cards, grids) that work across different screen sizes, ensuring consistency in responsive designs.
A Using grid-template-columns with repeat and minmax
B Using fixed pixel columns
C Using float grid systems
D Using table layouts
Explanation: Using repeat() with minmax() creates responsive grids that automatically adjust the number of columns based on the available space, such as repeat(auto-fill, minmax(200px, 1fr)).
A It provides a fixed grid system
B It offers a responsive 12-column grid with breakpoints
C It is only for desktop layouts
D It is not responsive
Explanation: Bootstrap's grid system provides a responsive 12-column grid that adapts to different screen sizes through predefined breakpoints (xs, sm, md, lg, xl).
A Responsive is fluid; adaptive has fixed breakpoints
B Responsive is older; adaptive is newer
C They are the same thing
D Adaptive uses more CSS; responsive uses more JavaScript
Explanation: Responsive design uses fluid grids that continuously adapt, while adaptive design uses fixed layout sizes that 'snap' to specific breakpoints.
A A website that works on all devices without horizontal scrolling
B A website that works only on mobile
C A website that uses only fixed widths
D A website that looks the same on all devices
Explanation: A fully responsive website works well on all devices, adapting to any screen size without requiring horizontal scrolling, pinch-zooming, or other workarounds.
A For better user experience on touch devices
B For faster loading
C For better SEO
D For easier maintenance
Explanation: Touch optimization ensures proper interaction on touch devices, including appropriate spacing for touch targets, touch-friendly gestures, and avoiding hover-only interactions.
A To display multiple images in a gallery
B To provide art direction across different devices
C To create image slideshows
D To style images
Explanation: The picture element enables art direction, allowing you to provide different cropped or sized images for different screen sizes or device capabilities.
A To create websites that look the same on all devices
B To create websites that adapt to different screen sizes and resolutions
C To make websites slower
D To use only JavaScript for layout
Explanation: Responsive web design aims to create websites that adapt to different screen sizes, resolutions, and device capabilities to provide an optimal user experience.
A Improved SEO
B Better user experience
C Easier website maintenance
D Increased development complexity without benefits
Explanation: While responsive design does add some complexity, it provides significant benefits including improved SEO, better UX, and easier maintenance compared to maintaining separate mobile and desktop sites.
A Having the same content on all devices
B Having better content on larger screens
C Having less content on mobile devices
D Only showing content on desktop
Explanation: Content parity means providing the same core content to all users regardless of device, though the presentation may differ. It's a principle of responsive design that ensures equal access.
A Using only large images
B Using srcset with different resolution options
C Using only small images
D Not including images in responsive design
Explanation: The srcset attribute allows you to provide multiple image versions for different resolutions or screen densities, improving both performance and visual quality.
A To detect the device's orientation (portrait or landscape)
B To orient images
C To set the page orientation
D To change text direction
Explanation: The orientation media feature allows you to apply different styles based on whether the device is in portrait or landscape mode, which is crucial for responsive designs on mobile devices.