1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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>
|
