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

How can you write a query to apply styles for touch-enabled devices?

Select your answer

Question 3/15

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

Select your answer

Question 4/15

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

Select your answer

Question 5/15

What media query would you use to check if the user's device is in dark mode?

Select your answer

Question 6/15

How do you target a CSS media query for devices with a minimum resolution of 300dpi?

Select your answer

Question 7/15

What is the correct syntax for using a media query to apply styles only to screen devices with a max width of 768px?

Select your answer

Question 8/15

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

Select your answer

Question 9/15

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

Select your answer

Question 10/15

What will happen if a media query is written with 'only all' like this: 
@media only all and (max-width: 800px)
?

Select your answer

Question 11/15

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

Select your answer

Question 12/15

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

Select your answer

Question 13/15

How would you write a media query targeting devices with unlimited data plans?

Select your answer

Question 14/15

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

Select your answer

Question 15/15

Which of the following conditions is NOT a valid media feature for media queries?

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
How can you write a query to apply styles for touch-enabled devices?

Available answers

'pointer: coarse' is used to target touch-enabled devices where the pointing mechanism has limited precision, like a finger touch on tablets and mobile phones.
Question 3/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 4/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 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
What media query would you use to check if the user's device is in dark mode?

Available answers

Choosing '@media (prefers-color-scheme: dark)' checks if the user's system is set to dark mode.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you target a CSS media query for devices with a minimum resolution of 300dpi?

Available answers

The correct syntax for specifying resolution in a media query uses the 'min-resolution' keyword followed by the value in dpi, i.e., @media only screen and (min-resolution: 300dpi).
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the correct syntax for using a media query to apply styles only to screen devices with a max width of 768px?

Available answers

The correct syntax includes both 'screen' and the 'and' keyword before specifying the condition, i.e., @media screen and (max-width: 768px).
Question 8/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.
Question 9/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 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
What will happen if a media query is written with 'only all' like this: <pre><code>@media only all and (max-width: 800px)</code></pre>?

Available answers

Using 'only' helps older browsers ignore the query. Modern browsers interpret 'only all' the same as 'all', but older browsers that don't understand media queries will ignore it.
Question 11/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 12/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 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
How would you write a media query targeting devices with unlimited data plans?

Available answers

Currently, CSS media queries do not have a feature to target devices based on data plan characteristics, like limited or unlimited plans.
Question 14/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 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of the following conditions is NOT a valid media feature for media queries?

Available answers

'max-frame-rate' is not a standard media feature for media queries. Valid features include 'color-index', 'aspect-ratio', 'height', etc.