toolsmoah

Viewport Media Query Generator

Genereer CSS media queries voor responsief webdesign.

Media Query Instellingen
Configureer media query condities

Conditie 1

Voorinstellingen
Kies veelgebruikte media query patronen
Gegenereerde CSS
@media screen and (max-width: 768px) {
  /* Your CSS rules here */
}
Veelvoorkomende breekpunten
Mobiel:max-width: 480px
Tablet:481px - 768px
Desktop:min-width: 1024px
Grote Desktop:min-width: 1200px
Media Query Gids

Belangrijkste Media Kenmerken

  • • width/height: Viewport breedte/hoogte
  • • min-width/max-width: Minimale/maximale breedte condities
  • • orientation: Schermoriëntatie (portret/landschap)
  • • resolution: Schermresolutie (retina displays, etc.)
  • • hover: Ondersteuning voor hover-functionaliteit
  • • pointer: Aanwijzerprecisie (aanraking/muis)

Gebruikstips

  • • Mobile First benadering: Gebruik min-width om te ontwerpen vanaf kleine schermen
  • • Combineer complexe condities met logische operatoren
  • • Gebruik print media type voor aparte printstijlen
  • • Gebruik resolution voor ondersteuning van hoge-resolutie displays