{"id":1430,"date":"2019-11-16T15:48:03","date_gmt":"2019-11-16T14:48:03","guid":{"rendered":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/?p=1430"},"modified":"2024-10-07T13:53:22","modified_gmt":"2024-10-07T11:53:22","slug":"grazie-allutilizzo-di-media-query-nelle-email-ora-gli-sviluppatori-possono-personalizzare-il-contenuto-delle-email-per-diversi-dispositivi","status":"publish","type":"post","link":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/","title":{"rendered":"Utilizzo di Media Query  Per creare email responsive"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Che cosa sono le media query per la posta elettronica?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Finalmente ora, grazie all\u2019utilizzo di media query anche le email possono diventare responsive ed essere adattate a diversi dispositivi.&nbsp;Una query multimediale \u00e8 composta da un tipo di supporto opzionale (palmare, stampa, TV e cos\u00ec via) e da un numero qualsiasi di espressioni opzionali che limitano l&#8217;attivazione della query, come larghezza, densit\u00e0 di pixel o orientamento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A livello di base, le query multimediali consentono a uno sviluppatore e-mail o progettista di e-mail di creare&nbsp;<a href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-development\/whats-the-difference-between-responsive-mobile-friendly-and\/\" target=\"_blank\" rel=\"noreferrer noopener sponsored nofollow\">un&#8217;e-mail reattiva<\/a>&nbsp;rilevando la larghezza del display su cui l&#8217;abbonato sta leggendo l&#8217;e-mail.&nbsp;A tale scopo, la query media e-mail pi\u00f9 comunemente utilizzata \u00e8 max-width.&nbsp;Con questo codice, tutti i &nbsp;<a href=\"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/i-vantaggi-dellutilizzo-di-sass-per-lo-sviluppo-web\/\">CSS<\/a>\u00a0 all&#8217;interno della query avranno effetto se la larghezza \u00e8 inferiore alla larghezza massima specificata.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le query multimediali possono essere utilizzate anche per determinate risoluzioni o client di posta elettronica specifici.&nbsp;\u00c8 inoltre possibile utilizzare le query multimediali anzich\u00e9 o in aggiunta alla&nbsp;<a href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-development\/a-fluid-hybrid-design-primer\" target=\"_blank\" rel=\"noreferrer noopener sponsored nofollow\">progettazione ibrida fluida<\/a>&nbsp;.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_87 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">In questo articolo:<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/#Funzionamento_delle_query_multimediali_di_larghezza_minima_e_massima\" >Funzionamento delle query multimediali di\nlarghezza minima e massima<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/#I_punti_di_interruzione\" >I punti di interruzione<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/#Codifica_per_media_query\" >Codifica per media query<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/#Altre_query_multimediali\" >Altre query multimediali<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Funzionamento_delle_query_multimediali_di_larghezza_minima_e_massima\"><\/span>Funzionamento delle query multimediali di\nlarghezza minima e massima<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Il funzionamento delle\nquery multimediali pu\u00f2 essere un po &#8216;confuso.&nbsp;Diamo un&#8217;occhiata alle query\nche sono comunemente utilizzate nella posta elettronica.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Larghezza massima<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Ecco un esempio di una\nquery con larghezza massima:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>@media only screen and (<\/code><code>max-width<\/code><code>: <\/code><code>600px<\/code><code>)&nbsp; {...}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Il significato reale di questa query \u00e8 &#8220;Se [larghezza dispositivo] \u00e8 inferiore o uguale a 600 px, quindi {&#8230;}&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pertanto, se l&#8217;e-mail\nviene aperta su un iPhone 5S, con una larghezza dello schermo di 320 px, la\nquery multimediale verr\u00e0 attivata e tutti gli stili contenuti in {\u2026} avranno\neffetto.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Min-width<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Ecco un esempio di una\nquery con larghezza minima:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>@media only screen and (<\/code><code>min-width<\/code><code>: <\/code><code>600px<\/code><code>)&nbsp; {...}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Il significato reale di questa\nquery \u00e8 &#8220;Se [larghezza dispositivo] \u00e8 maggiore o uguale a 600px, quindi\n{&#8230;}&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pertanto, se l&#8217;e-mail viene aperta su un iPhone 5S, con una\nlarghezza dello schermo di 320 px, la query multimediale&nbsp;<em>non si<\/em>&nbsp;attiver\u00e0\ne gli stili contenuti in {\u2026}&nbsp;<em>non<\/em>&nbsp;avranno\neffetto.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Combinazione di larghezza minima e larghezza\nmassima<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Puoi utilizzare queste\nquery insieme per scegliere come target un intervallo specifico di dimensioni\ndello schermo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media only screen and (max-width: 600px) and (min-width: 400px)&nbsp; {...}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">La query sopra verr\u00e0\nattivata solo per schermi con una larghezza compresa tra 400 e 600\npixel.&nbsp;\u00c8 possibile utilizzare questo metodo se si desidera targetizzare un\nprogetto per un dispositivo specifico con una larghezza nota.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"I_punti_di_interruzione\"><\/span><strong>I punti di interruzione<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La maggior parte delle\nquery multimediali sono impostate per attivarsi a determinate larghezze dello\nschermo o punti di interruzione.&nbsp;I parametri che usi sono una questione di\ndibattito tra gli sviluppatori di e-mail.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Alcuni sviluppatori\nsostengono che dovresti progettare per la tua vista pi\u00f9 piccola e aggiungere un\npunto di interruzione a una dimensione in cui il tuo disegno viene distorto.&nbsp;Con\nil lancio di pi\u00f9 dispositivi ogni mese, la progettazione di alcuni punti di\ninterruzione pu\u00f2 essere pi\u00f9 semplice rispetto al tentativo di creare qualcosa\nper ogni dimensione di dispositivo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">iPhone e iPad ci\nforniscono alcuni punti di interruzione facili da cui partire.&nbsp;Gli stili\ndi codifica per questi clienti specifici assicureranno che le nostre e-mail\nsiano perfette su queste schermate.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Gli androidi, d&#8217;altra\nparte, variano ampiamente nelle dimensioni dello schermo perch\u00e9 ci sono cos\u00ec\ntanti produttori e dispositivi diversi.&nbsp;Ti consigliamo di creare da due a\nquattro punti di interruzione che coprono la maggior parte dei dispositivi.&nbsp;Ecco\nun esempio usando alcuni comuni dispositivi Apple:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Breakpoint one: 320px (iPhone 5S):<\/li><li>Breakpoint due: 414px (iPhone 6+):<\/li><li>Breakpoint tre: 703px (iPad Mini):<\/li><li>Breakpoint quattro: 768px (iPad Air):<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Il terzo e il quarto punto di interruzione sono facoltativi,\npoich\u00e9 la maggior parte delle e-mail apparir\u00e0 bene mostrando la versione\ndesktop su un iPad o tablet di grandi dimensioni.&nbsp;\u00c8&nbsp;<em>possibile<\/em>&nbsp;cavarsela\nutilizzando solo il punto di interruzione due, se si codificano le tabelle del\ncontenitore per espanderle al 100% di larghezza (e non a una larghezza impostata,\nche potrebbe corrispondere o meno al dispositivo).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ecco un altro esempio&nbsp;<a href=\"https:\/\/www.w3schools.com\/howto\/howto_css_media_query_breakpoints.asp\" target=\"_blank\" rel=\"noreferrer noopener\">fornito da w3schools<\/a>&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Breakpoint one: max-larghezza 600px (dispositivi extra piccoli,\ncome i telefoni)<\/li><li>Breakpoint due: larghezza minima 600 px (dispositivi di piccole\ndimensioni, come tablet e telefoni di grandi dimensioni)<\/li><li>Breakpoint tre: larghezza minima 768 px (dispositivi medi, come\ntablet orizzontali)<\/li><li>Breakpoint quattro: larghezza minima 992 px (dispositivi di\ngrandi dimensioni, come laptop e desktop)<\/li><li>Punto di interruzione cinque: larghezza minima 1200 px\n(dispositivi extra-large, come laptop e desktop di grandi dimensioni)<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Impostazione della larghezza minima e\ndell&#8217;ordine dei punti di interruzione<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Esistono diversi modi\nper ordinare i punti di interruzione e le query multimediali.&nbsp;Le regole\nCSS che compaiono in seguito negli stili incorporati sovrascrivono le regole\nprecedenti se entrambe hanno la stessa specificit\u00e0.&nbsp;Ci\u00f2 significa che \u00e8\npossibile impostare prima le regole per i tablet (come l&#8217;interrogazione dei\nquattro punti di interruzione che abbiamo spiegato in precedenza), quindi\nimpostare gli stili per i dispositivi mobili (come il punto di interruzione due\nche abbiamo elencato).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Poich\u00e9 i due stili di\nbreakpoint (telefoni) seguono i quattro stili di breakpoint (tablet), gli stili\nmobili sovrascriveranno gli stili di tablet quando si innesca la query del\nbreakpoint due.&nbsp;Ci\u00f2 significa che non \u00e8 necessario impostare la larghezza\nminima per nessuna delle tue query multimediali, se sono disposte nell&#8217;ordine\ncorretto.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ecco un esempio di\nordine.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Stili desktop (non in una query multimediale)<\/li><li>Stili di tablet (larghezza massima: 768 px)<\/li><li>Stili mobili (larghezza massima: 414 px)<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Codifica_per_media_query\"><\/span><strong>Codifica per media query<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Quando si codifica un messaggio di <a href=\"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/i-10-migliori-software-di-email-marketing-del-2019\/\">posta elettronica<\/a> reattivo utilizzando le media query, una tecnica comune \u00e8 quella di creare tabelle con align = &#8220;left&#8221; e una classe speciale da indirizzare all&#8217;interno delle media query.&nbsp;Ad esempio, una sezione a due colonne potrebbe apparire cos\u00ec:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\" \n       class=\"deviceWidth\"&gt;\n   &lt;tr&gt;\n      &lt;td style=\"padding:10px 0\"&gt;\n         &lt;table align=\"left\" width=\"49%\" border=\"0\" class=\"deviceWidth\"&gt;\n            &lt;tr&gt;\n               &lt;td&gt;\n               &lt;\/td&gt;\n            &lt;\/tr&gt;\n         &lt;\/table&gt;\n         &lt;table align=\"left\" width=\"49%\" border=\"0\" class=\"deviceWidth\"&gt;\n            &lt;tr&gt;\n               &lt;td&gt;\n               &lt;\/td&gt;\n            &lt;\/tr&gt;\n         &lt;\/table&gt;\n      &lt;\/td&gt;\n   &lt;\/tr&gt;\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ognuna delle tabelle con una larghezza del 49% pu\u00f2 adattarsi fianco a fianco nella vista &#8220;desktop&#8221;.&nbsp;Usiamo il 49% invece del 50% perch\u00e9&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.emailonacid.com\/blog\/article\/email-development\/how-to-code-emails-for-outlook-2016\/\" target=\"_blank\">Outlook pu\u00f2 essere molto esigente<\/a>&nbsp;su cosa si adatta fianco a fianco e cosa no.&nbsp;Puoi usare una larghezza del 50% se imposti tutti gli stili (senza bordo, imbottitura, ecc.).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se si desidera creare\nuna sezione a tre colonne utilizzando un codice simile, impostare ciascuna\ntabella su una larghezza del 32%.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando il codice responsive entra in azione, vorremmo rendere questi blocchi di contenuto di larghezza del 100% per i telefoni, in modo che riempiano l&#8217;intero schermo.&nbsp;Una singola query multimediale gestir\u00e0 questo per la maggior parte dei telefoni:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media only screen and (max-width: 414px) {\n   .deviceWidth {width:280px!important; padding:0;}\n   .center {text-align: center!important;} \n} <\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Puoi continuare ad\naggiungere query multimediali con stili speciali per coprire tutte le dimensioni\ndello schermo che desideri.&nbsp;\u00c8 inoltre necessario aggiungere codice alle\nquery multimediali per ottimizzare la dimensione del carattere e l&#8217;altezza\ndella linea per ciascuna dimensione dello schermo.&nbsp;Ci\u00f2 migliorer\u00e0 la\nleggibilit\u00e0 per i tuoi destinatari.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Se desideri iniziare a lavorare con un modello reattivo,&nbsp;<a href=\"https:\/\/www.emailonacid.com\/resource\/emailology-responsive-email-template\/\" target=\"_blank\" rel=\"noreferrer noopener\">ne abbiamo uno gratuito a tua\ndisposizione nelle nostre risorse<\/a>&nbsp;.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Altre_query_multimediali\"><\/span><strong>Altre query multimediali<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ci sono alcune altre tecniche interessanti che puoi fare con le\nquery multimediali.&nbsp;Gli esempi seguenti sono pi\u00f9 rilevanti per la posta\nelettronica, ma controlla i&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Media_Queries\/Using_media_queries\" target=\"_blank\" rel=\"noreferrer noopener\">documenti Web Mozilla Developer\nNetwork (MDN)<\/a>&nbsp;per ulteriori tecniche di media query.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Orientamento<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c8 possibile utilizzare\nla seguente media query per indirizzare l&#8217;orientamento del dispositivo.&nbsp;Sfortunatamente,\nquesta query non funziona bene in iOS Mail.&nbsp;Nella maggior parte dei\nclient, la query multimediale orizzontale si attiver\u00e0 sempre indipendentemente\ndall&#8217;orientamento.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media screen and (orientation: landscape) { ...&nbsp; }<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Targeting per Yahoo!&nbsp;posta<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Puoi utilizzare questa\nsemplice query per scrivere stili che si attiveranno solo in Yahoo!&nbsp;Mail.&nbsp;Questo\npu\u00f2 essere usato per risolvere problemi di layout o rendering che vedi solo in\nYahoo!&nbsp;Mail o per includere messaggi destinati solo a Yahoo!&nbsp;utenti.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media (yahoo) { ...&nbsp; }<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Densit\u00e0 di pixel<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Questa query\nmultimediale \u00e8 destinata a dispositivi con una certa densit\u00e0 di pixel.&nbsp;In\ncombinazione con webkit, puoi scegliere come target i dispositivi\niOS.&nbsp;Questo pu\u00f2 essere utile quando aggiungi un codice interattivo che\nfunziona solo con iOS Mail.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media screen and (-webkit-min-device-pixel-ratio: 2) { ...&nbsp; }<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Media query per la stampa<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Quando imposti stili\nspecifici per la stampa, puoi assicurarti che la tua e-mail avr\u00e0 un\nbell&#8217;aspetto una volta stampata.&nbsp;Ci\u00f2 \u00e8 particolarmente importante per le\ne-mail con coupon o biglietti.&nbsp;Puoi nascondere elementi inutili, come\ncollegamenti e pulsanti, e visualizzare solo la parte dell&#8217;email che \u00e8\nimportante stampare.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media print { ...&nbsp; }<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Adding CSS media queries into an HTML Email.\" width=\"800\" height=\"600\" src=\"https:\/\/www.youtube.com\/embed\/L_majAgRlVM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><figcaption><a href=\"https:\/\/youtu.be\/L_majAgRlVM\" target=\"_blank\" rel=\"noreferrer noopener\">come funziona il CSS Media Query<\/a><\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Lo sapevi che grazie all\u2019utilizzo di media query ora anche le email possono diventare responsive ed essere adattate ai vari dispositivi?<\/p>\n","protected":false},"author":1,"featured_media":1431,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,12,138],"tags":[2250,2231,1206,2251,2364],"class_list":["post-1430","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-e-strumenti-operativi-per-lo-sviluppo-software","category-recenti","category-tips-tricks","tag-email","tag-fare","tag-pixel","tag-posta-elettronica","tag-query"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Utilizzo di Media Query Per creare email responsive<\/title>\n<meta name=\"description\" content=\"Lo sapevi che grazie all\u2019utilizzo di media query ora anche le email possono diventare responsive ed essere adattate ai vari dispositivi?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Utilizzo di Media Query Per creare email responsive\" \/>\n<meta property=\"og:description\" content=\"Lo sapevi che grazie all\u2019utilizzo di media query ora anche le email possono diventare responsive ed essere adattate ai vari dispositivi?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"Antonio Lamorgese\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-16T14:48:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-07T11:53:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-content\/uploads\/2019\/11\/Utilizzo-di-Media-Query-nelle-mail-HTML.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Antonio Lamorgese\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Utilizzo di Media Query Per creare email responsive\" \/>\n<meta name=\"twitter:description\" content=\"Lo sapevi che grazie all\u2019utilizzo di media query ora anche le email possono diventare responsive ed essere adattate ai vari dispositivi?\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-content\/uploads\/2019\/11\/Utilizzo-di-Media-Query-nelle-mail-HTML.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@AntonioLamorge3\" \/>\n<meta name=\"twitter:site\" content=\"@AntonioLamorge3\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Antonio Lamorgese\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/\"},\"author\":{\"name\":\"Antonio Lamorgese\",\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/#\\\/schema\\\/person\\\/264cf3af38edc93a3362a4c47ec5b2f0\"},\"headline\":\"Utilizzo di Media Query Per creare email responsive\",\"datePublished\":\"2019-11-16T14:48:03+00:00\",\"dateModified\":\"2024-10-07T11:53:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/\"},\"wordCount\":1358,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/#\\\/schema\\\/person\\\/264cf3af38edc93a3362a4c47ec5b2f0\"},\"image\":{\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Utilizzo-di-Media-Query-nelle-mail-HTML.jpg\",\"keywords\":[\"email\",\"fare\",\"pixel\",\"posta elettronica\",\"query\"],\"articleSection\":[\"Articoli\",\"Recenti\",\"Tips &amp; Tricks\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/\",\"url\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/\",\"name\":\"Utilizzo di Media Query Per creare email responsive\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Utilizzo-di-Media-Query-nelle-mail-HTML.jpg\",\"datePublished\":\"2019-11-16T14:48:03+00:00\",\"dateModified\":\"2024-10-07T11:53:22+00:00\",\"description\":\"Lo sapevi che grazie all\u2019utilizzo di media query ora anche le email possono diventare responsive ed essere adattate ai vari dispositivi?\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Utilizzo-di-Media-Query-nelle-mail-HTML.jpg\",\"contentUrl\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Utilizzo-di-Media-Query-nelle-mail-HTML.jpg\",\"width\":800,\"height\":450,\"caption\":\"UtilizzodiMediaQuerynell'e mailHTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"strumenti web e sviluppo software\",\"item\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/category\\\/web-e-strumenti-operativi-per-lo-sviluppo-software\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Utilizzo di Media Query Per creare email responsive\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/#website\",\"url\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/\",\"name\":\"Antonio Lamorgese\",\"description\":\"Il web e i suoi strumenti operativi\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/#\\\/schema\\\/person\\\/264cf3af38edc93a3362a4c47ec5b2f0\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/#\\\/schema\\\/person\\\/264cf3af38edc93a3362a4c47ec5b2f0\",\"name\":\"Antonio Lamorgese\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/ChiSono.png\",\"url\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/ChiSono.png\",\"contentUrl\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/ChiSono.png\",\"width\":120,\"height\":130,\"caption\":\"Antonio Lamorgese\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/ChiSono.png\"},\"description\":\"Amministratore di rete e sviluppatore. Dopo anni di esperienza nel settore, ho ideato un sistema di gestione dati MYSQL in PHP senza scrivere una sola riga di codice.&nbsp;Scopri di pi\u00f9....\",\"sameAs\":[\"https:\\\/\\\/www.Phpcodewizard.it\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/antonio-lamorgese-660735190\\\/\",\"https:\\\/\\\/pinterest.it\\\/antoniolamorgese9711\\\/\",\"https:\\\/\\\/x.com\\\/AntonioLamorge3\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/antoniolamorgese\",\"https:\\\/\\\/tumblr.com\\\/blog\\\/phpcodewizard\"],\"url\":\"https:\\\/\\\/www.phpcodewizard.it\\\/antoniolamorgese\\\/author\\\/antonio-lamorgese\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Utilizzo di Media Query Per creare email responsive","description":"Lo sapevi che grazie all\u2019utilizzo di media query ora anche le email possono diventare responsive ed essere adattate ai vari dispositivi?","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:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/","og_locale":"it_IT","og_type":"article","og_title":"Utilizzo di Media Query Per creare email responsive","og_description":"Lo sapevi che grazie all\u2019utilizzo di media query ora anche le email possono diventare responsive ed essere adattate ai vari dispositivi?","og_url":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/","og_site_name":"Antonio Lamorgese","article_published_time":"2019-11-16T14:48:03+00:00","article_modified_time":"2024-10-07T11:53:22+00:00","og_image":[{"width":800,"height":450,"url":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-content\/uploads\/2019\/11\/Utilizzo-di-Media-Query-nelle-mail-HTML.jpg","type":"image\/jpeg"}],"author":"Antonio Lamorgese","twitter_card":"summary_large_image","twitter_title":"Utilizzo di Media Query Per creare email responsive","twitter_description":"Lo sapevi che grazie all\u2019utilizzo di media query ora anche le email possono diventare responsive ed essere adattate ai vari dispositivi?","twitter_image":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-content\/uploads\/2019\/11\/Utilizzo-di-Media-Query-nelle-mail-HTML.jpg","twitter_creator":"@AntonioLamorge3","twitter_site":"@AntonioLamorge3","twitter_misc":{"Scritto da":"Antonio Lamorgese","Tempo di lettura stimato":"8 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/#article","isPartOf":{"@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/"},"author":{"name":"Antonio Lamorgese","@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/#\/schema\/person\/264cf3af38edc93a3362a4c47ec5b2f0"},"headline":"Utilizzo di Media Query Per creare email responsive","datePublished":"2019-11-16T14:48:03+00:00","dateModified":"2024-10-07T11:53:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/"},"wordCount":1358,"commentCount":0,"publisher":{"@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/#\/schema\/person\/264cf3af38edc93a3362a4c47ec5b2f0"},"image":{"@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-content\/uploads\/2019\/11\/Utilizzo-di-Media-Query-nelle-mail-HTML.jpg","keywords":["email","fare","pixel","posta elettronica","query"],"articleSection":["Articoli","Recenti","Tips &amp; Tricks"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/","url":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/","name":"Utilizzo di Media Query Per creare email responsive","isPartOf":{"@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/#primaryimage"},"image":{"@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-content\/uploads\/2019\/11\/Utilizzo-di-Media-Query-nelle-mail-HTML.jpg","datePublished":"2019-11-16T14:48:03+00:00","dateModified":"2024-10-07T11:53:22+00:00","description":"Lo sapevi che grazie all\u2019utilizzo di media query ora anche le email possono diventare responsive ed essere adattate ai vari dispositivi?","breadcrumb":{"@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/#primaryimage","url":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-content\/uploads\/2019\/11\/Utilizzo-di-Media-Query-nelle-mail-HTML.jpg","contentUrl":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-content\/uploads\/2019\/11\/Utilizzo-di-Media-Query-nelle-mail-HTML.jpg","width":800,"height":450,"caption":"UtilizzodiMediaQuerynell'e mailHTML"},{"@type":"BreadcrumbList","@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/grazie-al-media-query-nelle-email-ora-le-email-diventano-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/en\/"},{"@type":"ListItem","position":2,"name":"strumenti web e sviluppo software","item":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/category\/web-e-strumenti-operativi-per-lo-sviluppo-software\/"},{"@type":"ListItem","position":3,"name":"Utilizzo di Media Query Per creare email responsive"}]},{"@type":"WebSite","@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/#website","url":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/","name":"Antonio Lamorgese","description":"Il web e i suoi strumenti operativi","publisher":{"@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/#\/schema\/person\/264cf3af38edc93a3362a4c47ec5b2f0"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":["Person","Organization"],"@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/#\/schema\/person\/264cf3af38edc93a3362a4c47ec5b2f0","name":"Antonio Lamorgese","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-content\/uploads\/2019\/06\/ChiSono.png","url":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-content\/uploads\/2019\/06\/ChiSono.png","contentUrl":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-content\/uploads\/2019\/06\/ChiSono.png","width":120,"height":130,"caption":"Antonio Lamorgese"},"logo":{"@id":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-content\/uploads\/2019\/06\/ChiSono.png"},"description":"Amministratore di rete e sviluppatore. Dopo anni di esperienza nel settore, ho ideato un sistema di gestione dati MYSQL in PHP senza scrivere una sola riga di codice.&nbsp;Scopri di pi\u00f9....","sameAs":["https:\/\/www.Phpcodewizard.it\/","https:\/\/www.linkedin.com\/in\/antonio-lamorgese-660735190\/","https:\/\/pinterest.it\/antoniolamorgese9711\/","https:\/\/x.com\/AntonioLamorge3","https:\/\/www.youtube.com\/user\/antoniolamorgese","https:\/\/tumblr.com\/blog\/phpcodewizard"],"url":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/author\/antonio-lamorgese\/"}]}},"_links":{"self":[{"href":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-json\/wp\/v2\/posts\/1430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-json\/wp\/v2\/comments?post=1430"}],"version-history":[{"count":0,"href":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-json\/wp\/v2\/posts\/1430\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-json\/wp\/v2\/media\/1431"}],"wp:attachment":[{"href":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-json\/wp\/v2\/media?parent=1430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-json\/wp\/v2\/categories?post=1430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpcodewizard.it\/antoniolamorgese\/wp-json\/wp\/v2\/tags?post=1430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}