toolsmoah

Viewport-Medienabfrage-Generator

Generieren Sie CSS-Medienabfragen für responsives Webdesign.

Medienabfrageeinstellungen
Konfigurieren Sie die Bedingungen für Medienabfragen

Bedingung 1

Voreinstellungen
Wählen Sie häufig verwendete Medienabfragemuster
Generiertes CSS
@media screen and (max-width: 768px) {
  /* Your CSS rules here */
}
Häufige Haltepunkte
Mobil:max-width: 480px
Tablet:481px - 768px
Desktop:min-width: 1024px
Großer Desktop:min-width: 1200px
Leitfaden für Medienabfragen

Wichtige Medienmerkmale

  • • Breite/Höhe: Breite/Höhe des Ansichtsfensters
  • • min-width/max-width: Bedingungen für Mindest-/Höchstbreite
  • • Ausrichtung: Bildschirmausrichtung (Hoch-/Querformat)
  • • Auflösung: Bildschirmauflösung (Retina-Displays usw.)
  • • Hover-Fähigkeitsunterstützung
  • • Zeigergenauigkeit (Touch/Maus)

Verwendungstipps

  • • Mobile-First-Ansatz: Verwenden Sie min-width, um von kleinen Bildschirmen aus zu entwerfen
  • • Kombinieren Sie komplexe Bedingungen mit logischen Operatoren
  • • Verwenden Sie den Druckmedientyp für separate Druckstile
  • • Verwenden Sie die Auflösung für die Unterstützung von hochauflösenden Displays