Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Unused CSS Stages Media Queries Device-Specific Media Queries

What is device pixel ratio of 1 or 2?

I am taking the Stage 12 Quiz: Media Queries and I am having trouble progressing based on the following questions. Please advise, explain.

Question: If a device has a pixel-ratio of 2, then 1 CSS pixel is displayed as physical pixel(s) on screen.

Question: A device-pixel-ratio of 2 is equivalent to a resolution value of ?

I entered the answer of 192 to both questions but it is returning wrong. I thought I understood but I guess I do not.

I don't want to enter guesses I want to understand the information.


1 Answer

Paul Yabsley
Paul Yabsley
46,713 Points

As they say in the video "The device pixel ratio is the ratio between a devices logical pixels and physical pixels". Newer phones have screens with hi-resolution screens. This means they pack double the amount of pixels into the same physical space.

The answer to the first question is 2 because 1 css pixel will be rendered on 2 physical pixels.

The answer to the second question is 192dpi because to estimate the resolution you multiply the device-pixel-ratio by 96. However be sure to include the dpi after 192 otherwise the question doesn't pass.