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: 480pxTablet:
481px - 768pxDesktop:
min-width: 1024pxGrote Desktop:
min-width: 1200pxMedia 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