High-pixel-density screens affect how raster images such as JPGs and PNGs are displayed. Learn how to support background images displayed on Retina screens with CSS.
- [Narrator] Earlier, we talked about creating…two image files, a high-res and low-res image file…for Retina and non-Retina displays.…With images included in the HTML,…JavaScrip is required to detect the display…and swap the image dynamically.…However, for background images,…we can use media queries to conditionally set…the low-res or high-res background image…based on the pixel density of the screen.…Let's take a closer look at how this works.…
Most of the time when using media queries…we target the width of the viewport…to create responsive designs.…To target the screen by pixel density…use the resolution media feature instead.…Similar to targeting by width,…use min resolution to set a minimum DPI value.…The DPI value will vary across devices…because it's calculated by dividing the screen resolution…by it's screen size in inches.…A non-Retina display usually has about 96 dpi…or dots per inch.…
For example a 13.3 inch screen with 1280 by 800 resolution…will equal 96 dpi.…Since Retina displays have twice the amount of dots per inch…
- Designing with a grid
- Working with a flexbox
- Retina and high-density displays
- Raster and vector graphics
- Retina and images
- Animation and shapes
- CSS3 keyframes and animation
- CSS shapes
- CSS shape functions
- Responsive typography
- Fluid typography
- Accessibility and ARIA
- Style guides for CSS
Skill Level Intermediate
2. Retina Displays and Images
3. Animation and Shapes
4. Tools and Tips
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.