/web-exercises-css-responsive

Primary LanguageHTML

CSS Responsive Exercises

ATTENTION: this exercise uses CSS positioning!

This repository provides basic CSS responsive exercises and their solution.

The description of the individual tasks can be found here.

It is recommended to know about the following responsive units and media queries in order to complete the exercises.

Responsive Units

  • rem, em
  • vw, vh
  • %

Calculating with units:

  • calc(100% - 2rem + 15vh)

Media Queries

  • width
    • min-width
    • max-width
  • aspect-ratio
    • min-aspect-ratio
    • max-aspect-ratio
  • orientation
    • landscape
    • portrait
  • resolution
    • 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