Website Design Responsive Website Design 2 — Questions and Answers
Question 1: Which CSS unit is best suited for setting font sizes in a responsive design to respect user browser preferences?
- px
- rem (Correct answer)
- cm
- pt
Correct answer: rem
The rem unit scales relative to the root element's font size, which respects user-defined browser font preferences.
Question 2: What does the 'mobile-first' approach mean in responsive web design?
- Designing only for mobile devices
- Starting with styles for small screens and adding complexity for larger screens (Correct answer)
- Using a mobile app instead of a website
- Hiding desktop content on mobile
Correct answer: Starting with styles for small screens and adding complexity for larger screens
Mobile-first means writing base CSS for small screens and using min-width media queries to progressively enhance for larger screens.
Question 3: Which HTML element attribute is used to provide different image sources for different screen resolutions?
- data-src
- srcset (Correct answer)
- href
- media
Correct answer: srcset
The srcset attribute on an <img> tag allows the browser to select the most appropriate image based on screen resolution and size.
Question 4: In CSS Flexbox, which property controls how items wrap onto multiple lines?
- flex-direction
- align-items
- flex-wrap (Correct answer)
- justify-content
Correct answer: flex-wrap
The flex-wrap property determines whether flex items are forced onto one line or can wrap onto multiple lines.
Question 5: What is the purpose of the <picture> element in responsive web design?
- To add captions to images
- To provide multiple image sources for different contexts like resolution or format (Correct answer)
- To create image slideshows
- To define image dimensions
Correct answer: To provide multiple image sources for different contexts like resolution or format
The <picture> element allows specifying multiple <source> elements so browsers can choose the best image for the current viewport or device.
Question 6: Which CSS Grid property defines both rows and columns in a single declaration?
- grid-template (Correct answer)
- grid-area
- grid-auto-flow
- grid-gap
Correct answer: grid-template
The grid-template shorthand property sets grid-template-rows, grid-template-columns, and grid-template-areas in one declaration.
Question 7: When using responsive images, what does the 'sizes' attribute on an <img> tag specify?
- The physical file size of the image
- How wide the image will be displayed at various viewport widths (Correct answer)
- The number of images to load
- The image's aspect ratio
Correct answer: How wide the image will be displayed at various viewport widths
The sizes attribute tells the browser the expected display size of the image at different viewport widths, helping it choose from srcset.
Website Design Responsive Website Design 2
Which CSS unit is best suited for setting font sizes in a responsive design to respect user browser preferences?