CSS Media Queries Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

If a site has a media query that implements a rule for max-width: 480px but no queries for wider screens, what will happen on wider devices?

Select your answer

Question 2/15

Which operator in media queries allows for adding media features together in a single query?

Select your answer

Question 3/15

Which of the following is a use case where a media query would NOT be appropriate?

Select your answer

Question 4/15

How can a media query be used for a utility class to make an element visible only on mobile devices?

Select your answer

Question 5/15

Which of these media queries targets devices with a width less than 600px?

Select your answer

Question 6/15

What CSS rule would you use to set styles specifically for screens larger than 1200px?

Select your answer

Question 7/15

What does the following media query target? 
@media (orientation: landscape) { ... }

Select your answer

Question 8/15

Which of the following queries will target screens that are both wider than 500px and taller than 400px?

Select your answer

Question 9/15

Which media feature would you use to apply specific styles when the user is using a dark color scheme?

Select your answer

Question 10/15

What is the result of this media query: 
@media (min-width: 600px) { .content { font-size: 16px; } }
?

Select your answer

Question 11/15

Can you combine multiple media types in a single media query? If yes, how?

Select your answer

Question 12/15

Which media type would you use for targeting printers in a CSS media query?

Select your answer

Question 13/15

How do you specify styles that are specific to devices with a monochrome display?

Select your answer

Question 14/15

How can you use the 'hover' media feature in a media query?

Select your answer

Question 15/15

Which one of the following actions would a media query like '
@media not all and (max-width: 600px)
' allow?

Select your answer

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15
😊 Your answer was correct 🙁 Your answer was incorrect
If a site has a media query that implements a rule for max-width: 480px but no queries for wider screens, what will happen on wider devices?

Available answers

Without specific media queries for larger widths, devices will use styles defined outside the query, commonly referred to as default styles.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which operator in media queries allows for adding media features together in a single query?

Available answers

The 'and' operator allows you to specify multiple conditions in a single media query by joining different features together.
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of the following is a use case where a media query would NOT be appropriate?

Available answers

Media queries are not suitable for applying styles based on language; they're typically used for screen size, orientation, and resolution changes.
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
How can a media query be used for a utility class to make an element visible only on mobile devices?

Available answers

Using 'max-width: 768px' targets typical mobile devices to make styles specifically for environments where the viewport is no larger than a tablet's default view.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of these media queries targets devices with a width less than 600px?

Available answers

A media query with the 'max-width' feature for 599px will target devices with a width less than 600px.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
What CSS rule would you use to set styles specifically for screens larger than 1200px?

Available answers

The correct usage is '@media screen and (min-width: 1200px)' to target screens wider than 1200 pixels.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
What does the following media query target? <pre><code>@media (orientation: landscape) { ... }</code></pre>

Available answers

The media query '(orientation: landscape)' targets devices that are currently in landscape orientation.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of the following queries will target screens that are both wider than 500px and taller than 400px?

Available answers

To target both width and height, the correct syntax combines the two media features using 'and', as shown in the answer '@media (min-width: 500px) and (min-height: 400px)'.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which media feature would you use to apply specific styles when the user is using a dark color scheme?

Available answers

The 'prefers-color-scheme' media feature lets you detect if the user has selected a dark or light color scheme in their OS or browser settings.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the result of this media query: <pre><code>@media (min-width: 600px) { .content { font-size: 16px; } }</code></pre>?

Available answers

The media query sets a minimum width of 600px, meaning the styles are only applied if the viewport is 600px or wider.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
Can you combine multiple media types in a single media query? If yes, how?

Available answers

Yes, you can combine multiple media types using commas, acting as an OR operator between each condition.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which media type would you use for targeting printers in a CSS media query?

Available answers

The media type 'print' is specifically used for applying styles to printed materials.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you specify styles that are specific to devices with a monochrome display?

Available answers

Use '@media (monochrome)' to target devices that display in shades of a single color.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
How can you use the 'hover' media feature in a media query?

Available answers

The 'hover' media feature is used with values like 'hover' to specify that the device's primary pointer can hover over elements.
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which one of the following actions would a media query like '<pre><code>@media not all and (max-width: 600px)</code></pre>' allow?

Available answers

The media query uses 'not' and will apply styles to devices not matching the condition, meaning all devices except those with a width of less than 600px.