Cerca articoli della Knowledge Base

Media Queries e Responsive Design

Le Media Queries permettono di applicare stili diversi in base alle caratteristiche del dispositivo.

Sintassi base

/* Mobile first */
.container { width: 100%; }

@media (min-width: 768px) {
  .container { width: 750px; }
}

@media (min-width: 1024px) {
  .container { width: 970px; }
}

Breakpoints comuni

  • 576px - Small (smartphone landscape)
  • 768px - Medium (tablet)
  • 992px - Large (desktop)
  • 1200px - Extra large

Altri tipi di media query

@media (orientation: landscape) { }
@media (prefers-color-scheme: dark) { }
@media print { }

Hai trovato utile quest'articolo?

Articoli Correlati

  • Introduzione al CSS

    Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile e la presentazione ...

  • Selettori CSS di base

    I selettori CSS permettono di identificare gli elementi HTML a cui applicare gli stili.Tipi di selet...

  • Proprietà color e background

    Le proprietà color e background sono fondamentali per definire l'aspetto visivo degli elementi.Propr...

  • Margin e Padding

    Margin e Padding controllano lo spazio intorno e dentro gli elementi.Differenza chiaveMargin: spazio...

  • Box Model CSS

    Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappresentato come un...