CSS-Responsive-Exercises

Responsive Units we already know

• rem, em
• vw, vh
• %
  we also know we can calculate with them:
• calc(100% - 2rem + 15vh)

Media Queries you might want to know about

• width: 600px / min-width / max-width
• aspect-ratio: 4/3 / min-aspect-ratio / max-aspect-ratio
• orientation : landscape, portrait
• resolution: 150dpi / min-resolution / max-resolution
• prefers-color-scheme: dark, light
• prefers-reduced-motion
• prefers-contrast: no-preference, more, less
• any-pointer: none, coarse, fine

Links to inform yourself

Responsive Design

Beginners Guide to Media Queries

Using Media Queries

Responsive Images

Picture Element