Website Design Responsive Website Design 2

Question 1

Which CSS unit is best suited for setting font sizes in a responsive design to respect user browser preferences?

Accepted Answer

rem

Answer

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?

Accepted Answer

Starting with styles for small screens and adding complexity for larger screens

Answer

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?

Accepted Answer

srcset

Answer

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?

Accepted Answer

flex-wrap

Answer

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?

Accepted Answer

To provide multiple image sources for different contexts like resolution or format

Answer

The <picture> element allows specifying multiple <source> elements so browsers can choose the best image for the current viewport or device.

Website Design Practice Test