Generatore di Media Query per Viewport
Genera media query CSS per il responsive web design.
Impostazioni Media Query
Configura le condizioni della media query
Condizione 1
Predefiniti
Scegli i modelli di media query più comuni
CSS generato
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}Punti di interruzione comuni
Mobile:
max-width: 480pxTablet:
481px - 768pxDesktop:
min-width: 1024pxDesktop grande:
min-width: 1200pxGuida alle Media Query
Caratteristiche chiave dei media
- • width/height: Larghezza/altezza del viewport
- • min-width/max-width: Condizioni di larghezza minima/massima
- • orientation: Orientamento dello schermo (verticale/orizzontale)
- • resolution: Risoluzione dello schermo (display retina, ecc.)
- • hover: Supporto per la capacità di hover
- • pointer: Precisione del puntatore (touch/mouse)
Consigli per l'uso
- • Approccio Mobile First: usa min-width per progettare da schermi piccoli
- • Combina condizioni complesse con operatori logici
- • Usa il tipo di media print per stili di stampa separati
- • Usa resolution per il supporto di display ad alta risoluzione