1 files changed, 136 insertions, 0 deletions
diff --git a/files/it/web/css/media_queries/index.html b/files/it/web/css/media_queries/index.html
new file mode 100644
index 0000000000..aaa9a6ac17
--- /dev/null
+++ b/files/it/web/css/media_queries/index.html
@@ -0,0 +1,136 @@
+---
+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>