{"id":47824,"date":"2021-09-23T13:12:44","date_gmt":"2021-09-23T11:12:44","guid":{"rendered":"https:\/\/kinsta.com\/?p=102257"},"modified":"2023-03-14T13:14:51","modified_gmt":"2023-03-14T12:14:51","slug":"media-query-javascript","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/","title":{"rendered":"Guida Approfondita alle Media Query in JavaScript"},"content":{"rendered":"<p>Nella maggior parte dei siti web moderni si seguono tecniche di <a href=\"https:\/\/kinsta.com\/it\/blog\/responsive-web-design\/\">responsive web design<\/a> per assicurarsi che siano belli, leggibili e utilizzabili su dispositivi di qualsiasi dimensione dello schermo, cio\u00e8 telefoni cellulari, tablet, computer portatili, monitor di PC desktop, televisori, proiettori e altro.<\/p>\n<p>I siti che utilizzano queste tecniche hanno un unico template che modifica il layout in base alle dimensioni dello schermo:<\/p>\n<ul>\n<li>Gli schermi pi\u00f9 piccoli mostrano normalmente una vista lineare a colonna singola dove i controlli dell&#8217;UI come i <a href=\"https:\/\/kinsta.com\/it\/blog\/plugin-menu-wordpress\/\">menu<\/a> sono attivati cliccando sulle icone (hamburger).<\/li>\n<li>Gli schermi pi\u00f9 grandi mostrano una maggiore quantit\u00e0 di informazioni, forse con barre laterali allineate orizzontalmente. I controlli UI come le voci di menu possono essere sempre visibili per garantire un accesso pi\u00f9 facile.<\/li>\n<\/ul>\n<p>Una parte importante del responsive web design \u00e8 l&#8217;implementazione di una media query <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-css\/\">CSS<\/a> o JavaScript per rilevare le dimensioni del dispositivo e servire automaticamente il design giusto per quella dimensione. Spiegheremo perch\u00e9 queste query sono importanti e come utilizzarle, ma prima parliamo del responsive design in generale.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Perch\u00e9 il Design Reattivo \u00e8 Importante?<\/h2>\n<p>\u00c8 impossibile fornire un <a href=\"https:\/\/kinsta.com\/it\/blog\/responsive-web-design\/\">singolo layout di pagina<\/a> e aspettarsi che vada bene ovunque.<\/p>\n<p>Quando i telefoni cellulari ottennero per la prima volta un accesso rudimentale al web nei primi anni 2000, i proprietari di siti spesso creavano due o tre template di pagina separati, vagamente basati sulle visualizzazioni, per cellulari e desktop. Questo divenne sempre pi\u00f9 impraticabile man mano che la variet\u00e0 di dispositivi cresceva in modo esponenziale.<\/p>\n<p>Oggi ci sono numerose dimensioni di schermo che vanno dai minuscoli display da polso agli enormi monitor da 8 K e oltre. Anche se considerate solo i telefoni cellulari, i dispositivi recenti possono avere una risoluzione pi\u00f9 alta di molti computer portatili di fascia bassa.<\/p>\n<p>Inoltre, l&#8217;utilizzo dei cellulari ha <a href=\"https:\/\/gs.statcounter.com\/platform-market-share\/desktop-mobile-tablet\" target=\"_blank\" rel=\"noopener noreferrer\">superato quello dei computer desktop<\/a>. A meno che il vostro sito non abbia un target specifico di utenti, potete aspettarvi che la maggior parte delle persone vi acceda da uno smartphone. I dispositivi a piccolo schermo non sono pi\u00f9 un ripiego e dovrebbero essere considerati fin dall&#8217;inizio, nonostante la maggior parte dei web designer, sviluppatori e clienti continuino ad utilizzare un PC standard.<\/p>\n<p>Google ha riconosciuto l&#8217;importanza dei dispositivi mobili. I <a href=\"https:\/\/kinsta.com\/it\/blog\/google-mobile-first-index\/\">siti si classificano meglio nella ricerca di Google<\/a> quando sono utilizzabili e funzionano bene su uno smartphone. Un buon contenuto rimane vitale, ma un sito che carica lentamente e che non riesce ad adattarsi alle dimensioni dello schermo della vostra base di utenti potrebbe danneggiare il vostro business.<\/p>\n<p>Infine, considerate anche l&#8217;accessibilit\u00e0. Un sito che funziona correttamente per tutti, non importa quale dispositivo si stia utilizzando, raggiunger\u00e0 un pubblico pi\u00f9 vasto. L&#8217;accessibilit\u00e0 \u00e8 un requisito legale in molti paesi, ma anche se non lo \u00e8 nel vostro paese, tenete sempre conto che pi\u00f9 spettatori porteranno pi\u00f9 conversioni e una maggiore redditivit\u00e0.<\/p>\n\n<h2>Come Funziona il Design Reattivo?<\/h2>\n<p>A base del responsive design ci sono le <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Media_Queries\" target=\"_blank\" rel=\"noopener noreferrer\">media query<\/a>: una tecnologia CSS che fa s\u00ec che vengano applicati gli stili in base a indicatori come il tipo di output (schermo, stampante o anche discorso), le dimensioni dello schermo, le proporzioni del display, l&#8217;orientamento del dispositivo, la profondit\u00e0 del colore e la precisione del puntatore. Le media query possono anche prendere in considerazione le preferenze dell&#8217;utente, comprese le animazioni ridotte, la modalit\u00e0 chiaro\/scuro e un maggiore contrasto.<\/p>\n<p>Gli esempi che abbiamo mostrato mostrano le media query che utilizzano solo la larghezza dello schermo, ma i siti possono essere molto pi\u00f9 flessibili. Per i dettagli, fate riferimento al <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\" target=\"_blank\" rel=\"noopener noreferrer\">set completo di opzioni su MDN<\/a>.<\/p>\n<p>Il <a href=\"https:\/\/caniuse.com\/css-mediaqueries\" target=\"_blank\" rel=\"noopener noreferrer\">supporto delle media query \u00e8 eccellente<\/a> ed \u00e8 presente nei browser da pi\u00f9 di un decennio. Solo IE8 e inferiori non le supporta. Ignora gli stili applicati dalle media query, ma questo a volte pu\u00f2 essere un vantaggio (si legga di pi\u00f9 nella sezione <strong>Best Practices<\/strong> qui sotto).<\/p>\n<p>Ci sono tre modi standard per applicare gli stili utilizzando le media query. Il primo carica fogli di stile specifici nel <a href=\"https:\/\/kinsta.com\/it\/blog\/html-e-html5\/\">codice HTML<\/a>. Ad esempio, il seguente tag carica il foglio di stile <strong>wide.css<\/strong> quando un dispositivo ha uno schermo largo almeno 800 pixel:<\/p>\n<pre><code class=\"language-html\">&lt;link rel=\"stylesheet\" media=\"screen and (min-width: 800px)\" href=\"wide.css\" \/&gt;<\/code><\/pre>\n<p>In secondo luogo, i fogli di stile possono essere caricati condizionatamente nei file CSS utilizzando una at-rule <code>@import<\/code>:<\/p>\n<pre><code class=\"language-css\"><code class=\"la&lt;span id=\">\/*<\/code> main.css *\/ @import url('wide.css') screen and (min-width: 800px);<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>L&#8217;utilizzo di <code>@import<\/code> dovrebbe essere evitato perch\u00e9 ogni file CSS importato blocca il rendering. I tag HTML <code>&lt;link&gt;<\/code> sono scaricati in parallelo, mentre <code>@import<\/code> scarica i file in serie.<\/p>\n<\/aside>\n\n<p>Pi\u00f9 normalmente, applicherete le media query nei fogli di stile utilizzando un blocco at-rule CSS @media che modifica stili specifici. Ad esempio:<\/p>\n<pre><code class=\"language-css\">\/* default styles *\/\nmain {\n  width: 400px;\n}\n\n\/* styles applied when screen has a width of at least 800px *\/\n@media screen and (min-width: 800px) {\n  main {\n    width: 760px;\n  }\n}<\/code><\/pre>\n<p>Gli sviluppatori possono applicare qualsiasi regola di media query sia necessaria per adattare il layout di un sito.<\/p>\n<h2>Best Practice per le Media Query<\/h2>\n<p>Quando sono state concepite le media query per la prima volta, molti siti hanno optato per un insieme di layout rigidamente fissi. Questo \u00e8 concettualmente pi\u00f9 facile da progettare e codificare perch\u00e9 replica efficacemente un insieme limitato di modelli di pagina. Ad esempio:<\/p>\n<ol>\n<li>Le larghezze dello schermo inferiori a 600px utilizzano un layout mobile di 400px.<\/li>\n<li>Le larghezze dello schermo tra 600px e 999px utilizzano un layout tipo tablet di 600px.<\/li>\n<li>Le larghezze dello schermo superiori a 1.000px utilizzano un layout tipo desktop di 1000px.<\/li>\n<\/ol>\n<p>La tecnica \u00e8 imperfetta. I risultati su schermi molto piccoli e molto grandi possono apparire scadenti e pu\u00f2 essere richiesta la manutenzione dei CSS quando i dispositivi e le dimensioni dello schermo cambiano nel tempo.<\/p>\n<p>Un&#8217;opzione migliore \u00e8 quella di utilizzare un design fluido <a href=\"https:\/\/kinsta.com\/it\/blog\/google-mobile-first-index\/\">mobile-first<\/a> con punti di rottura che adattano il layout a certe dimensioni. In sostanza, il layout predefinito utilizza gli stili pi\u00f9 semplici per piccoli schermi che posizionano gli elementi in blocchi verticali lineari.<\/p>\n<p>Ad esempio, <code>&lt;article&gt;<\/code> e <code>&lt;aside&gt;<\/code> in un contenitore <code>&lt;main&gt;<\/code>:<\/p>\n<pre><code class=\"language-css\">\/* default small-screen device *\/\nmain {\n  width: 100%;\n}\n\narticle, aside {\n  width: 100%;\n  padding: 2em;\n}<\/code><\/pre>\n<p>Ecco il risultato in tutti i browser &#8211; anche quelli molto vecchi che non supportano le media query:<\/p>\n<figure style=\"width: 626px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-linear-example.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-linear-example.png\" alt=\"Esempio di screenshot senza supporto alle media query.\" width=\"626\" height=\"200\"><\/a><figcaption class=\"wp-caption-text\">Esempio di screenshot senza supporto alle media query.<\/figcaption><\/figure>\n<p>Quando le media query sono supportate e lo schermo supera una larghezza specifica, diciamo 500px, <code>&lt;article&gt;<\/code> e <code>&lt;aside&gt;<\/code> possono essere posizionati orizzontalmente. Questo esempio utilizza una <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/grid\" target=\"_blank\" rel=\"noopener noreferrer\">griglia CSS<\/a>, in cui il contenuto primario utilizza circa due terzi della larghezza e il contenuto secondario utilizza il restante terzo:<\/p>\n<pre><code class=\"language-css\">\/* larger device *\/\n@media (min-width: 500px) {\n  main {\n    display: grid;\n    grid-template-columns: 2fr 1fr;\n    gap: 2em;\n  }\n\n  article, aside {\n    width: auto;\n    padding: 0;\n  }\n}<\/code><\/pre>\n<p>Ecco il risultato su schermi pi\u00f9 grandi:<\/p>\n<figure style=\"width: 602px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-horizontal.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/site-horizontal.png\" alt=\"sempio di screenshot con supporto delle media query.\" width=\"602\" height=\"112\"><\/a><figcaption class=\"wp-caption-text\">Esempio di screenshot con supporto delle media query.<\/figcaption><\/figure>\n<h2>Alternative alle Media Query<\/h2>\n<p>I design reattivi possono anche essere implementati nei moderni CSS utilizzando propriet\u00e0 pi\u00f9 recenti che adattano intrinsecamente il layout senza esaminare le dimensioni della finestra. Le opzioni includono:<\/p>\n<ul>\n<li><code>calc<\/code>, <code>min-width<\/code>, <code>max-width<\/code>, <code>min-height<\/code>, <code>max-height<\/code>, e la pi\u00f9 recente propriet\u00e0 <code>clamp<\/code> possono tutti definire dimensioni che dimensionano gli elementi secondo limiti noti e spazio disponibile.<\/li>\n<li>Le unit\u00e0 viewport <code>vw<\/code>, <code>vh<\/code>, <code>vmin<\/code>, e <code>vmax<\/code> possono dimensionare gli elementi secondo le frazioni di dimensione dello schermo.<\/li>\n<li>Il testo pu\u00f2 essere mostrato in colonne CSS che appaiono o scompaiono quando lo spazio lo permette.<\/li>\n<li>Gli elementi possono essere dimensionati secondo le dimensioni degli elementi figli utilizzando le dimensioni <code>min-content<\/code>, <code>fit-content<\/code>, e <code>max-content<\/code>.<\/li>\n<li>CSS flexbox pu\u00f2 avvolgere &#8211; o non avvolgere &#8211; gli elementi quando iniziano a superare lo spazio disponibile.<\/li>\n<li>Gli elementi della griglia CSS possono essere dimensionati con unit\u00e0 <code>fr<\/code> frazionarie proporzionali. La funzione CSS repeat pu\u00f2 essere utilizzata insieme a <code>minmax<\/code>, <code>auto-fit<\/code> e <code>auto-fill<\/code> per allocare lo spazio disponibile.<\/li>\n<li>Le nuove e (attualmente) sperimentali <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/CSS\/CSS_Container_Queries\">container query CSS<\/a> possono reagire allo spazio parziale di cui dispone un componente all&#8217;interno di un layout.<\/li>\n<\/ul>\n<p>Queste opzioni vanno oltre lo scopo di questo articolo, ma sono spesso pi\u00f9 pratiche delle media query pi\u00f9 crude, che possono rispondere solo alle dimensioni dello schermo. Se potete ottenere un layout senza media query, probabilmente sar\u00e0 necessario meno codice, sar\u00e0 pi\u00f9 efficiente e richieder\u00e0 una minore manutenzione nel tempo.<\/p>\n<p>Detto questo, ci sono situazioni in cui le media query rimangono l&#8217;unica opzione di layout possibile. Rimangono essenziali quando avete bisogno di considerare altri fattori dello schermo come le proporzioni, l&#8217;orientamento del dispositivo, la profondit\u00e0 del colore, la precisione del puntatore o le preferenze dell&#8217;utente come le animazioni ridotte e la modalit\u00e0 chiaro\/scuro.<\/p>\n<h2>Avete Bisogno di Media Query in JavaScript?<\/h2>\n<p>Fino ad ora abbiamo parlato soprattutto di CSS. Questo perch\u00e9 la maggior parte dei problemi di layout possono &#8211; e <em>dovrebbero<\/em> &#8211; essere risolti solo con i CSS.<\/p>\n<p>Ma ci sono situazioni in cui \u00e8 pratico usare una media query JavaScript invece dei CSS, come ad esempio quando:<\/p>\n<ul>\n<li>Un componente, come un menu, ha funzionalit\u00e0 diverse su schermi piccoli e grandi.<\/li>\n<li>Passare da e verso il ritratto\/paesaggio influenza la funzionalit\u00e0 di una web app.<\/li>\n<li>Un gioco basato sul tocco deve cambiare il layout del <code>&lt;canvas&gt;<\/code> o adattare i pulsanti di controllo.<\/li>\n<li>Una web app aderisce alle preferenze dell&#8217;utente come la modalit\u00e0 scuro\/chiaro, l&#8217;animazione ridotta, la precisione del tocco, ecc.<\/li>\n<\/ul>\n<p>Le sezioni seguenti mostrano tre soluzioni in cui si utilizzano le media query &#8211; o opzioni simili alle media-query &#8211; in <a href=\"https:\/\/kinsta.com\/it\/blog\/vue-js\/\">JavaScript<\/a>. Tutti gli esempi restituiscono una stringa di stato dove:<\/p>\n<ul>\n<li>vista <strong>piccola<\/strong> = uno schermo con una larghezza inferiore a 400 pixel;<\/li>\n<li>vista <strong>media<\/strong> = uno schermo con una larghezza tra 400 e 799 pixel; e<\/li>\n<li>vista <strong>grande<\/strong> = uno schermo con una larghezza di 800 pixel o pi\u00f9.<\/li>\n<\/ul>\n<h2>Opzione 1: Controllare le Dimensioni della Finestra di Visualizzazione<\/h2>\n<p>Nei giorni bui, prima che le media query fossero implementate, questa era l&#8217;unica opzione. JavaScript ascoltava gli eventi di &#8220;ridimensionamento&#8221; del browser, analizzava le dimensioni della finestra utilizzando <code>window.innerWidth<\/code> e <code>window.innerHeight<\/code> (o <code>document.body.clientWidth<\/code> e <code>document.body.clientHeight<\/code> nei vecchi IE) e reagiva di conseguenza.<\/p>\n<p>Questo codice emette la stringa calcolata <strong>small<\/strong>, <strong>medium<\/strong> o <strong>large<\/strong> nella console:<\/p>\n<pre><code class=\"language-js\">const\n  screen = {\n    small: 0,\n    medium: 400,\n    large: 800\n  };\n\n\/\/ observe window resize\nwindow.addEventListener('resize', resizeHandler);\n\n\/\/ initial call\nresizeHandler();\n\n\/\/ calculate size\nfunction resizeHandler() {\n\n  \/\/ get window width\n  const iw = window.innerWidth;\n \n  \/\/ determine named size\n  let size = null;\n  for (let s in screen) {\n    if (iw &gt;= screen[s]) size = s;\n  }\n\n  console.log(size);\n}<\/code><\/pre>\n<p>Ne potete vedere una <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/mdmBymR\" target=\"_blank\" rel=\"noopener noreferrer\">dimostrazione funzionante qui<\/a>. (Se usate un browser desktop, aprite questo link in una nuova finestra per facilitare il ridimensionamento. Gli utenti mobili possono ruotare il dispositivo)<\/p>\n<p>L&#8217;esempio qui sopra esamina la dimensione della finestra mentre il browser viene ridimensionato; determina se \u00e8 piccola, media o grande e la imposta come classe sull&#8217;elemento body, che cambia il colore di sfondo.<\/p>\n<p>I vantaggi di questo metodo sono:<\/p>\n<ul>\n<li>Funziona in ogni <a href=\"https:\/\/kinsta.com\/it\/mercato-globale-dei-browser\/\">browser<\/a> che pu\u00f2 eseguire JavaScript &#8211; anche in applicazioni antiquate.<\/li>\n<li>Cattura le dimensioni esatte e pu\u00f2 reagire di conseguenza.<\/li>\n<\/ul>\n<p>Gli svantaggi:<\/p>\n<ul>\n<li>\u00c8 una tecnica vecchia che richiede un considerevole codice.<\/li>\n<li>\u00c8 troppo esatta? Avete davvero bisogno di sapere quando la larghezza \u00e8 966px invece di 967px?<\/li>\n<li>Potreste aver bisogno di abbinare manualmente le dimensioni ad una media query CSS corrispondente.<\/li>\n<li>Gli utenti possono ridimensionare il browser rapidamente, facendo s\u00ec che la funzione handler venga eseguita di nuovo ogni volta. Questo pu\u00f2 sovraccaricare i browser pi\u00f9 vecchi e lenti strozzando l&#8217;evento. Pu\u00f2 essere attivato solo una volta ogni 500 millisecondi.<\/li>\n<\/ul>\n<p>In sintesi, non monitorate le dimensioni della finestra a meno che non abbiate requisiti di dimensionamento molto specifici e complessi.<\/p>\n<h2 id=\"option2\">Opzione 2: Definire e Monitorare una Propriet\u00e0 CSS Personalizzata (Variabile)<\/h2>\n<p>Questa \u00e8 una tecnica un po&#8217; insolita che cambia il valore di una stringa di una propriet\u00e0 CSS personalizzata quando viene attivata una media query. Le propriet\u00e0 personalizzate sono <a href=\"https:\/\/kinsta.com\/it\/blog\/browser-piu-sicuri\/\">supportate da tutti i browser moderni<\/a> (ma non in IE).<\/p>\n<p>Nell&#8217;esempio qui sotto, la propriet\u00e0 personalizzata <code>--screen custom property<\/code> \u00e8 impostata su &#8220;small&#8221;, &#8220;medium&#8221; o &#8220;large&#8221; all&#8217;interno di un blocco di codice @media:<\/p>\n<pre><code class=\"language-css\">body {\n  --screen: \"small\";\n  background-color: #cff;\n  text-align: center;\n}\n\n@media (min-width: 400px) {\n \n  body {\n    --screen: \"medium\";\n    background-color: #fcf;\n  }\n \n}\n\n@media (min-width: 800px) {\n \n  body {\n    --screen: \"large\";\n    background-color: #ffc;\n  }\n \n}<\/code><\/pre>\n<p>Il valore pu\u00f2 essere emesso in CSS da solo utilizzando uno pseudo-elemento (questo deve essere contenuto tra apici singoli o doppi):<\/p>\n<pre><code class=\"language-css\">p::before {\n  content: var(--screen);\n}<\/code><\/pre>\n<p>Potete recuperare il valore della propriet\u00e0 personalizzata con JavaScript:<\/p>\n<pre><code class=\"language-js\">const screen = getComputedStyle(window.body)\n                 .getPropertyValue('--screen');<\/code><\/pre>\n<p>Questa non \u00e8 proprio tutta la storia, per\u00f2, perch\u00e9 il valore restituito contiene tutti gli spazi bianchi e i caratteri di citazione definiti dopo i due punti nel CSS. La stringa sar\u00e0 &#8216;&#8221;large&#8221;&#8216;, quindi \u00e8 necessario fare un po&#8217; di ordine:<\/p>\n<pre><code class=\"language-js\">\/\/ returns small, medium, or large in a string\nconst screen = getComputedStyle(window.body)\n                 .getPropertyValue('--screen')\n                 .replace(\/\\W\/g, '');<\/code><\/pre>\n<p>Potete vederne una <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/BaRwNzG\" target=\"_blank\" rel=\"noopener noreferrer\">dimostrazione funzionante qui<\/a>. (Se usate un browser desktop, aprite questo link in una nuova finestra per facilitare il ridimensionamento. Gli utenti mobili possono ruotare il dispositivo)<\/p>\n<p>L&#8217;esempio esamina il valore CSS ogni due secondi. Richiede un po&#8217; di codice JavaScript, ma \u00e8 necessario per rilevare i cambiamenti &#8211; non potete rilevare automaticamente se il valore della propriet\u00e0 personalizzata \u00e8 cambiato utilizzando i CSS.<\/p>\n<p>Non \u00e8 nemmeno possibile scrivere il valore in uno pseudo-elemento e rilevare il cambiamento utilizzando un <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MutationObserver\" target=\"_blank\" rel=\"noopener noreferrer\">DOM Mutation Observer<\/a>. Gli pseudo-elementi non sono una parte &#8220;reale&#8221; del DOM!<\/p>\n<p>I vantaggi:<\/p>\n<ul>\n<li>\u00c8 una tecnica semplice che utilizza principalmente i CSS e corrisponde alle vere media query.<\/li>\n<li>Allo stesso tempo pu\u00f2 essere modificata qualsiasi altra propriet\u00e0 CSS.<\/li>\n<li>Non c&#8217;\u00e8 bisogno di duplicare o analizzare le stringhe delle media query JavaScript.<\/li>\n<\/ul>\n<p>Lo svantaggio principale \u00e8 che non potete reagire automaticamente ad un cambiamento nella dimensione della finestra del browser. Se l&#8217;utente ruota il suo telefono dall&#8217;orientamento verticale a quello orizzontale, JavaScript non lo sapr\u00e0 mai. Potete verificare i cambiamenti frequentemente, ma questo \u00e8 inefficiente e porta al ritardo che vedete nella nostra dimostrazione.<\/p>\n<p>Il monitoraggio delle propriet\u00e0 CSS personalizzate \u00e8 una tecnica innovativa, ma \u00e8 pratica solo quando:<\/p>\n<ol>\n<li>Il layout pu\u00f2 essere fissato nel momento in cui la pagina viene resa inizialmente. Un chiosco o un <a href=\"https:\/\/kinsta.com\/it\/blog\/stripe-vs-square\/\">terminale point-of-sale<\/a> \u00e8 una possibilit\u00e0, ma \u00e8 probabile che questi abbiano risoluzioni fisse e un unico layout, quindi le media query JavaScript diventano irrilevanti.<\/li>\n<li>Il sito o l&#8217;applicazione esegue gi\u00e0 frequenti funzioni basate sul tempo, come l&#8217;animazione di un gioco. La propriet\u00e0 personalizzata potrebbe essere controllata contemporaneamente per determinare se sono necessari dei cambiamenti di layout.<\/li>\n<\/ol>\n<h2>Opzione 3: Utilizzare l&#8217;API matchMedia<\/h2>\n<p><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/matchMedia\">L&#8217;API matchMedia<\/a> \u00e8 un po&#8217; insolita ma vi permette di implementare una media query in JavaScript. \u00c8 <a href=\"https:\/\/caniuse.com\/matchmedia\" target=\"_blank\" rel=\"noopener noreferrer\">supportata dalla maggior parte dei browser<\/a>, da IE10 in su. Il costruttore restituisce un <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/MediaQueryList\" target=\"_blank\" rel=\"noopener noreferrer\">oggetto MediaQueryList<\/a> che dispone di una propriet\u00e0 matches che assume il valore true o false per la sua specifica media query.<\/p>\n<p>Il seguente codice produce true quando la larghezza della finestra del browser \u00e8 di 800px o superiore:<\/p>\n<pre><code class=\"language-js\">const mqLarge = window.matchMedia( '(min-width: 800px)' );\nconsole.log( mqLarge.matches );<\/code><\/pre>\n<p>All&#8217;oggetto MediaQueryList pu\u00f2 essere applicato un evento &#8220;change&#8221;. Questo viene attivato ogni volta che lo stato della propriet\u00e0 matches cambia: Diventa true (oltre 800px) dopo essere stato precedentemente false (sotto 800px) o viceversa.<\/p>\n<p>Alla funzione di gestione ricevente viene passato come primo parametro l&#8217;oggetto MediaQueryList:<\/p>\n<pre><code class=\"language-js\">const mqLarge = window.matchMedia( '(min-width: 800px)' );\nmqLarge.addEventListener('change', mqHandler);\n\n\/\/ media query handler function\nfunction mqHandler(e) {\n \n  console.log(\n    e.matches ? 'large' : 'not large'\n  );\n \n}<\/code><\/pre>\n<p>Il gestore viene eseguito solo quando cambia la propriet\u00e0 matches. Non verr\u00e0 eseguito quando la pagina viene caricata inizialmente, quindi potete invocare direttamente la funzione per determinare lo stato iniziale:<\/p>\n<pre><code class=\"language-js\">\/\/ initial state\nmqHandler(mqLarge);<\/code><\/pre>\n<p><a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-http-api-parte-2\/\">L&#8217;API<\/a> funziona bene quando vi muovete tra due stati distinti. Per analizzare tre o pi\u00f9 stati, come <strong>small<\/strong>, <strong>medium<\/strong> e <strong>large<\/strong>, sar\u00e0 richiesta una maggiore quantit\u00e0 di codice.<\/p>\n<p>Iniziate definendo un oggetto &#8220;state&#8221; dello schermo con gli oggetti matchMedia associati:<\/p>\n<pre><code class=\"language-js\">const\n  screen = {\n    small : null,\n    medium: window.matchMedia( '(min-width: 400px)' ),\n    large: window.matchMedia( '(min-width: 800px)' )\n  };<\/code><\/pre>\n<p>Non \u00e8 necessario definire un oggetto matchMedia sullo stato <strong>small<\/strong> perch\u00e9 il gestore dell&#8217;evento medium si attiver\u00e0 quando si sposta tra <strong>small<\/strong> e <strong>medium<\/strong>.<\/p>\n<p>Possono quindi essere impostati gli event listener per gli eventi <strong>medium<\/strong> e <strong>large<\/strong>. Questi invocano la stessa funzione gestore mqHandler():<\/p>\n<pre><code class=\"language-js\">\/\/ media query change events\nfor (let [scr, mq] di Object.entries(screen)) {\n  if (mq) mq.addEventListener('change', mqHandler);\n}<\/code><\/pre>\n<p>La funzione handler deve controllare tutti gli oggetti MediaQueryList per determinare se <strong>small<\/strong>, <strong>medium<\/strong> o <strong>large<\/strong> \u00e8 attualmente attivo. Le corrispondenze devono essere eseguite in ordine di dimensione perch\u00e9 una larghezza di 999px corrisponderebbe sia a <strong>medium<\/strong> che a <strong>large<\/strong> &#8211; solo la pi\u00f9 grande dovrebbe &#8220;vincere&#8221;:<\/p>\n<pre><code class=\"language-js\">\/\/ media query handler function\nfunction mqHandler() {\n\n  let size = null;\n  for (let [scr, mq] di Object.entries(screen)) {\n    if (!mq || mq.matches) size = scr;\n  }\n \n  console.log(size);\n \n}<\/code><\/pre>\n<p>Qui trovate una <a href=\"https:\/\/codepen.io\/craigbuckler\/full\/VwbMroZ\" target=\"_blank\" rel=\"noopener noreferrer\">dimostrazione funzionante<\/a>. (Se usate un browser desktop, aprite questo link in una nuova finestra per facilitarne il ridimensionamento. Gli utenti mobili possono ruotare il dispositivo)<\/p>\n<p>Esempi di utilizzo sono:<\/p>\n<ol>\n<li>Media query nei CSS per impostare e visualizzare una propriet\u00e0 personalizzata (come mostrato nell<strong>&#8216;opzione 2<\/strong> vista sopra)<\/li>\n<li>Media query identiche negli oggetti matchMedia per monitorare i cambiamenti di dimensione in JavaScript. L&#8217;output JavaScript cambier\u00e0 esattamente nello stesso momento.<\/li>\n<\/ol>\n<p>I principali vantaggi dell&#8217;utilizzo dell&#8217;API matchMedia sono:<\/p>\n<ul>\n<li>\u00c8 guidata dagli eventi ed efficiente nel processare i cambiamenti delle media query.<\/li>\n<li>Utilizza stringhe di media query identiche ai CSS.<\/li>\n<\/ul>\n<p>Gli svantaggi:<\/p>\n<ul>\n<li>Gestire due o pi\u00f9 media query richiede pi\u00f9 attenzione e logica nel codice.<\/li>\n<li>Probabilmente dovrete duplicare le stringhe media query sia nel codice CSS che in quello JavaScript. Questo potrebbe portare ad errori se non li tenete sincronizzati.<\/li>\n<\/ul>\n<p>Per evitare discrepanze tra le media query, potreste considerare l&#8217;utilizzo di token di progettazione nel vostro sistema di compilazione. Le stringhe di media query sono definite in un file JSON (o simile) e i valori sono inseriti nel codice CSS e JavaScript al momento della compilazione.<\/p>\n<p>In sintesi, l&#8217;API matchMedia \u00e8 probabilmente il modo pi\u00f9 efficiente e pratico per implementare una media query JavaScript. Ha alcune particolarit\u00e0, ma \u00e8 l&#8217;opzione migliore nella maggior parte dei casi.<\/p>\n\n<h2>Riepilogo<\/h2>\n<p>Le opzioni di dimensionamento CSS intrinseche sono sempre pi\u00f9 praticabili, ma le media query rimangono la base del <a href=\"https:\/\/kinsta.com\/it\/blog\/responsive-web-design\/\">responsive web design<\/a> per la maggior parte dei siti. Saranno sempre necessarie per gestire layout pi\u00f9 complessi e preferenze dell&#8217;utente, come la modalit\u00e0 chiaro\/scuro.<\/p>\n<p>Cercate di mantenere le media query solo sui CSS, dove possibile. Ma quando non avete altra scelta che avventurarvi nel regno di JavaScript, l&#8217;API matchMedia fornisce un controllo aggiuntivo per i componenti JavaScript media query che richiedono funzionalit\u00e0 aggiuntive in base alle dimensioni.<\/p>\n<p>Avete altri suggerimenti per implementare una media query JavaScript? Condivideteli nella sezione dei commenti!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nella maggior parte dei siti web moderni si seguono tecniche di responsive web design per assicurarsi che siano belli, leggibili e utilizzabili su dispositivi di qualsiasi &#8230;<\/p>\n","protected":false},"author":188,"featured_media":47836,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[25648,25574],"topic":[25870,25847],"class_list":["post-47824","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-javascript-frameworks","topic-esperienza-utente","topic-tutorial-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Guida Approfondita alle Media Query in JavaScript<\/title>\n<meta name=\"description\" content=\"Per rendere il layout di un sito reattivo, le media query sono normalmente definite nei CSS. Ma possono essere utilizzate anche in JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guida Approfondita alle Media Query in JavaScript\" \/>\n<meta property=\"og:description\" content=\"Per rendere il layout di un sito reattivo, le media query sono normalmente definite nei CSS. Ma possono essere utilizzate anche in JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-23T11:12:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-14T12:14:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/javascript-media-query.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Craig Buckler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Per rendere il layout di un sito reattivo, le media query sono normalmente definite nei CSS. Ma possono essere utilizzate anche in JavaScript.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/javascript-media-query.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@craigbuckler\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Craig Buckler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/\"},\"author\":{\"name\":\"Craig Buckler\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/715d986404b06691ab3014e06596908e\"},\"headline\":\"Guida Approfondita alle Media Query in JavaScript\",\"datePublished\":\"2021-09-23T11:12:44+00:00\",\"dateModified\":\"2023-03-14T12:14:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/\"},\"wordCount\":2797,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/javascript-media-query.jpeg\",\"keywords\":[\"JavaScript\",\"JavaScript Frameworks\"],\"articleSection\":[\"Sviluppo Web\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/\",\"name\":\"Guida Approfondita alle Media Query in JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/javascript-media-query.jpeg\",\"datePublished\":\"2021-09-23T11:12:44+00:00\",\"dateModified\":\"2023-03-14T12:14:51+00:00\",\"description\":\"Per rendere il layout di un sito reattivo, le media query sono normalmente definite nei CSS. Ma possono essere utilizzate anche in JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/javascript-media-query.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/javascript-media-query.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Una guida approfondita all'uso delle media queries in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial JavaScript\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/tutorial-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guida Approfondita alle Media Query in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/715d986404b06691ab3014e06596908e\",\"name\":\"Craig Buckler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g\",\"caption\":\"Craig Buckler\"},\"description\":\"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.\",\"sameAs\":[\"https:\/\/craigbuckler.com\/\",\"https:\/\/www.linkedin.com\/in\/craigbuckler\",\"https:\/\/x.com\/craigbuckler\",\"https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/craigbuckler\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Guida Approfondita alle Media Query in JavaScript","description":"Per rendere il layout di un sito reattivo, le media query sono normalmente definite nei CSS. Ma possono essere utilizzate anche in JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/","og_locale":"it_IT","og_type":"article","og_title":"Guida Approfondita alle Media Query in JavaScript","og_description":"Per rendere il layout di un sito reattivo, le media query sono normalmente definite nei CSS. Ma possono essere utilizzate anche in JavaScript.","og_url":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2021-09-23T11:12:44+00:00","article_modified_time":"2023-03-14T12:14:51+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/javascript-media-query.jpeg","type":"image\/jpeg"}],"author":"Craig Buckler","twitter_card":"summary_large_image","twitter_description":"Per rendere il layout di un sito reattivo, le media query sono normalmente definite nei CSS. Ma possono essere utilizzate anche in JavaScript.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/javascript-media-query.jpeg","twitter_creator":"@craigbuckler","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Craig Buckler","Tempo di lettura stimato":"14 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/"},"author":{"name":"Craig Buckler","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/715d986404b06691ab3014e06596908e"},"headline":"Guida Approfondita alle Media Query in JavaScript","datePublished":"2021-09-23T11:12:44+00:00","dateModified":"2023-03-14T12:14:51+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/"},"wordCount":2797,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/javascript-media-query.jpeg","keywords":["JavaScript","JavaScript Frameworks"],"articleSection":["Sviluppo Web"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/","url":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/","name":"Guida Approfondita alle Media Query in JavaScript","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/javascript-media-query.jpeg","datePublished":"2021-09-23T11:12:44+00:00","dateModified":"2023-03-14T12:14:51+00:00","description":"Per rendere il layout di un sito reattivo, le media query sono normalmente definite nei CSS. Ma possono essere utilizzate anche in JavaScript.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/javascript-media-query.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/09\/javascript-media-query.jpeg","width":1460,"height":730,"caption":"Una guida approfondita all'uso delle media queries in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/media-query-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Tutorial JavaScript","item":"https:\/\/kinsta.com\/it\/argomenti\/tutorial-javascript\/"},{"@type":"ListItem","position":3,"name":"Guida Approfondita alle Media Query in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/715d986404b06691ab3014e06596908e","name":"Craig Buckler","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8e76011e66720bd2e3e24e164aa6f0b2?s=96&d=mm&r=g","caption":"Craig Buckler"},"description":"Freelance UK web developer, writer, and speaker. Has been around a long time and rants about standards and performance.","sameAs":["https:\/\/craigbuckler.com\/","https:\/\/www.linkedin.com\/in\/craigbuckler","https:\/\/x.com\/craigbuckler","https:\/\/www.youtube.com\/channel\/UCQwdl5oBTWGhifS6bRGADMQ"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/craigbuckler\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/47824","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/188"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=47824"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/47824\/revisions"}],"predecessor-version":[{"id":66851,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/47824\/revisions\/66851"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47824\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47824\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47824\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47824\/translations\/de"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47824\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47824\/translations\/it"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47824\/translations\/nl"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/47824\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/47836"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=47824"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=47824"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=47824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}