Another media feature we can target is screen resolution. Many times we will want to supply higher quality media (images, video, etc.) only to users with screens that can support high resolution media. Targeting screen resolution also helps users avoid downloading high resolution (large file size) images that their screen may not be able to properly display.
To target by resolution, we can use the min-resolution and max-resolution media features. These media features accept a resolution value in either dots per inch (dpi) or dots per centimeter (dpc). Learn more about resolution measurements here.
The media query in the example above targets high resolution screens by making sure the screen resolution is at least 300 dots per inch. If the screen resolution query is met, then we can use CSS to display high resolution images and other media.
Instructions
Write a media query to make the logo higher quality if the visitor is looking at the Amazing Space website on a high resolution display.
A high resolution display may have a min-resolution of 150dpi.
Inside of the media query, add this CSS property to the .logo class:
This code will exchange the existing logo with a higher resolution logo. To make the difference obvious, the higher resolution spaceship logo has blue wings.
If you are accessing Codecademy on a screen with a resolution greater than 150dpi, you will observe the spaceship change. If not, you can re-write the min-resolution media feature to a lower value to observe the change.