---
title: Media queries
slug: Web/CSS/Media_Queries
tags:
  - CSS
  - CSS3 Media Query
  - Disegno Responsivo
  - media query
translation_of: Web/CSS/Media_Queries
---
<div>{{CSSRef("CSS3 Media Queries")}}</div>

<p>Le<strong> Media Queries</strong> sono un componente essenziale del <a href="/en-US/docs/Web/Apps/Progressive/Responsive">disegno responsivo</a>, che rende possibile adattare il codice CSS a differenti parametri e caratteristiche dei dispositivi con cui viene visualizzato un sito. Per esempio, una media query può applicare uno stile differente al sito se lo schermo del dispositivo è di dimensioni inferiori a un certo limite, o a seconda che l'utente stia usando il dispositivo in modalità portrait (visualizzazione verticale) o landscape (visualizzazione orizzontale).  La direttiva {{cssxref("@media")}} è usata per applicare stili condizionali a un documento.</p>

<p>Inoltre, la sintassi delle media queries è usata anche in altri contesti, come nell'attributo {{htmlattrxref("media", "source")}} di un elemento {{HTMLElement("source")}} , con il quale si può specificare quale sorgente usare per un elemento {{HTMLElement("picture")}}.</p>

<p>Esiste inoltre il metodo {{domxref("Window.matchMedia()")}} che si può usare per testare il rapporto tra lo schermo corrente e una media query. Puoi anche usare {{domxref("MediaQueryList.addListener()")}} per ricevere una notifica ogni volta che lo stato delle queries cambia. Con quesa funzionalità, il tuo sito o la tua applicazione possono rispondere a cambi nella configurazione, nell'orientamento o nello stato del dispositivo.</p>

<p>Puoi saperne di più su come usare le media queries programmaticamente nell'articolo <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>.</p>

<h2 id="Referenze">Referenze</h2>

<h3 id="Direttive">Direttive</h3>

<div class="index">
<ul>
 <li>{{cssxref("@import")}}</li>
 <li>{{cssxref("@media")}}</li>
</ul>
</div>

<h2 id="Guide">Guide</h2>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Come usare le media queries</a></dt>
 <dd>Introduzione alle media queries, alla loro sintassi, agli operatori e alle funzionalità usate per costruire espressioni di media query.</dd>
 <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Come testare le media queries</a></dt>
 <dd>Come testare le media queries dal tuo codice JavaScript, programmaticamente, per determinare lo stato del dispositivo, e implementare listeners che comunichino al tuo codice un cambio nei risultati delle media queries, come per esempio quando l'utente ruota lo schermo, causando un cambio di orientamento.</dd>
</dl>

<h2 id="Specifiche">Specifiche</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specifica</th>
   <th scope="col">Status</th>
   <th scope="col">Commenti</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Conditional')}}</td>
   <td>{{Spec2('CSS3 Conditional')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS4 Media Queries')}}</td>
   <td>{{Spec2('CSS4 Media Queries')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Media Queries')}}</td>
   <td>{{Spec2('CSS3 Media Queries')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Definizione iniziale</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilità_browser">Compatibilità browser</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Browser</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Supporto basico</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.7)}}</td>
   <td>9.0</td>
   <td>9.2</td>
   <td>1.3</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Browser</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>
    <table class="compat-table">
     <tbody>
      <tr>
       <td>Supporto basico</td>
       <td> </td>
      </tr>
     </tbody>
    </table>
   </td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(1.7)}}</td>
   <td>9.0</td>
   <td>9.0</td>
   <td>3.1</td>
  </tr>
 </tbody>
</table>
</div>