CSS/Media Queries

Mit Medienabfragen (Media Queries) können Sie die Darstellung eines Dokuments für verschiedene Ausgabemedien festlegen. Dabei wird ermittelt, welche Medientyp (Bildschirm, Drucker) oder Medienmerkmale (z. B. Abmessungen oder Farbfähigkeit) oder bereits im Betriebssytem getroffene Benutzereinstellungen der Browser vorfindet.

Erfüllt das verwendete Ausgabemedium alle Kriterien einer Merkmalsabfrage, so wird die damit verknüpfte CSS-Ressource eingebunden.

 

1. Medienabfragen einbinden
   • Einbindung mehrerer Stylesheets im head
   • Medienabfrage in der CSS-Ressource
   • ein skalierbarer Viewport
   • Gruppierung und Kombination
   • Merkmalabfragen von
     • diskreten Merkmalen
     • Wertebereichsmerkmalen
2. Medientypen
   • all
   • print
   • screen
3. Medienmerkmale
   • width
   • height
   • aspect-ratio
   • orientation
   • color
   • color-index
   • color-gamut
   • display-mode
   • monochrome
   • pointer
   • resolution
   • scan
   • grid
4. Benutzereinstellungen
   • prefers-color-scheme
   • prefers-contrast
   • prefers-reduced-motion
   • prefers-reduced-transparency
   • inverted-colors
5. Container Queries
   
   
   
   
   
   
   
   
   

• Medienabfragen einbinden

Siehe auch

• Print-CSS
• JavaScript: window.matchMedia