Character

Media Queries

Using media queries and min-width in combination with max-width allows us to segment the CSS rules and therefore change the base color.

• Any device narrower than 349px is Daffy
• Any device between 350px and 379px is Donald
• Any device between 380px and 499px is Goofy
• Any device between 500px and 749px is Mickey
• Any device between 750px and 999px is Tom
• Any device between 1000px and 1499px is Tweety
• Any device wider than 1500px is Yosemite

Background Image

Using the background property, we can load a different image onto the page using CSS.

Pixel Density

Newer mobile devices and some laptops now have more dots of light than they do CSS pixel. If we use responsive images we can provide a higher resolution logo on higher pixel density screens.

Responsive Images

By using srcset attribute in an image tag, you can enable the browser to load a different image depending on the screen width.

• Browsers that are too stupid to understand srcset will see Mickey Mouse
• Any device narrower than 560px is Warner Brothers
• Any device between 561px and 1080px is Walt Disney
• Any device wider than 1081px is Universal