CSS Responsive Design & Media Queries 2

Question 1

Which media feature targets devices in landscape orientation?

Accepted Answer

@media (orientation: landscape)

Answer

The orientation media feature accepts the values landscape or portrait.

Question 2

What does the meta viewport value 'width=device-width' do?

Accepted Answer

Sets the layout viewport to the device's screen width

Answer

It matches the layout viewport width to the device's actual screen width.

Question 3

Which unit is relative to 1% of the viewport's width?

Accepted Answer

vw

Answer

vw equals 1% of the viewport width.

Question 4

A mobile-first stylesheet typically uses which media query type to add larger-screen rules?

Accepted Answer

min-width

Answer

Mobile-first design starts small and adds min-width breakpoints for larger screens.

Question 5

Which CSS feature lets you specify different image sources based on screen size in HTML?

Accepted Answer

srcset attribute

Answer

The srcset attribute on img provides multiple resolution candidates.

CSS Language Practice Test