CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS @media

La regola CSS3 @media consente di applicare stili in base al contesto

La regola @media in CSS3 permette di applicare condizioni logiche per modificare lo stile in base alla larghezza, altezza, orientamento, risoluzione e altri parametri del dispositivo o della finestra. È una componente chiave per creare siti **responsive** e adattabili a ogni schermo.

Sintassi

@media condizione {
  /* Regole CSS */
}

Condizioni principali e loro significato:

  • max-width: Applica gli stili solo se la larghezza della viewport è inferiore o uguale al valore specificato. Esempio: @media (max-width: 600px)

  • min-width: Applica gli stili solo se la larghezza della viewport è maggiore o uguale al valore specificato. Esempio: @media (min-width: 768px)

  • orientation: Verifica l'orientamento del dispositivo. Valori: portrait o landscape

  • and: Permette di combinare più condizioni. Esempio: @media (min-width: 600px) and (max-width: 1024px)


Esempio proprietà: @media


Codice Esempio: @media

CODE: CSSpreleva codice
  1. .media-example {
  2.   width: 80%;
  3.   padding: 20px;
  4.   background-color: #aed581;
  5.   border: 2px solid #33691e;
  6.   border-radius: 10px;
  7.   font-size: 18px;
  8.   text-align: center;
  9.   margin: auto;
  10. }
  11.  
  12. @media (max-width: 600px) {
  13.   .media-example {
  14.     background-color: #ffccbc;
  15.   }
  16. }

Contenuto Esempio: @media

Esempio di utilizzo di @media

In questo esempio, lo sfondo del box cambia colore se la larghezza dello schermo è inferiore a 767px:


Ridimensiona la finestra per vedere il cambio di colore!

CSS e HTML per una media query:

  
  <style>
    .media-example {
      width: 80%;
      padding: 20px;
      background-color: #aed581;
      border: 2px solid #33691e;
      border-radius: 10px;
      font-size: 18px;
      text-align: center;
      margin: auto;
    }

    @media (max-width: 767px) {
      .media-example {
        background-color: #ffccbc; /* colore diverso per schermi piccoli */
      }
    }
  </style>

  <div class="media-example">
    Ridimensiona la finestra per vedere il cambio di colore!
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies