diff options
Diffstat (limited to 'files/it/web/css/media_queries/index.html')
| -rw-r--r-- | files/it/web/css/media_queries/index.html | 136 |
1 files changed, 0 insertions, 136 deletions
diff --git a/files/it/web/css/media_queries/index.html b/files/it/web/css/media_queries/index.html deleted file mode 100644 index aaa9a6ac17..0000000000 --- a/files/it/web/css/media_queries/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -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> |