{"id":7170,"date":"2021-07-20T21:06:17","date_gmt":"2021-07-20T19:06:17","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/qual-e-la-differenza-tra-px-em-rem-vw-e-vh\/"},"modified":"2026-09-02T23:07:55","modified_gmt":"2026-09-02T21:07:55","slug":"qual-e-la-differenza-tra-px-em-rem-vw-e-vh","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/it\/qual-e-la-differenza-tra-px-em-rem-vw-e-vh\/","title":{"rendered":"Qual \u00e8 la differenza tra PX, EM, REM, %, VW e VH?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Video passo dopo passo<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Cu\u00e1l es la diferencia entre PX, EM, REM, VW\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/JBt29Y1AwsQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"0-estructura-b%C3%A1sica-de-un-documento-html\">Struttura di base di un documento HTML<\/h2>\n\n<p class=\"wp-block-paragraph\">Come diceva Carl Sagan, <a href=\"https:\/\/www.youtube.com\/watch?v=LTo31PjL05c\" target=\"_blank\" rel=\"noreferrer noopener\">\u00abSe vuoi fare <em>una torta di mele da zero, devi prima inventare l\u2019universo<\/em>\u00bb<\/a>, e s\u00ec: per capire le unit\u00e0 relative di Elementor, cos\u2019\u00e8 un elemento padre o il contenitore radice, ecc., prima dobbiamo sapere come si struttura, in modo basilare, una pagina web in linguaggio HTML.<\/p>\n\n<p class=\"wp-block-paragraph\">Qui vediamo la struttura minima di un documento HTML (HyperText Markup Language). Il linguaggio HTML \u00e8 composto da tag delimitati dai segni di minore di  <strong>&lt;<\/strong>  e maggiore di  <strong>&gt;<\/strong>, ad esempio  &lt;html&gt;, salvo eccezioni come il primo tag  &lt;!DOCTYPE html&gt;  che \u00e8 assoluto, tutti i tag hanno apertura e chiusura, ad esempio  <strong>&lt;h1&gt;<\/strong>Intestazione<strong>&lt;\/h1&gt;<\/strong>, la chiusura si distingue perch\u00e9 l\u2019apertura del tag include <strong><span class=\"has-inline-color has-black-color\">&lt;\/<\/span><\/strong> oltre al \u00abminore di\u00bb; la barra obliqua, chiamata anche <strong>slash<\/strong> <strong>\/<\/strong>.<\/p>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a9a91b174d2b&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a9a91b174d2b\" class=\"aligncenter size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"561\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML.png\" alt=\"Struttura minima di un documento HTML\" class=\"wp-image-5034\" style=\"width:648px;height:379px\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML.png 960w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-500x292.png 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-768x449.png 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-600x351.png 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<ol class=\"wp-block-list\">\n<li>  La prima riga dell\u2019esempio \u00e8 un elemento assoluto (non ha tag di chiusura); \u00e8 una <strong>dichiarazione del tipo di documento<\/strong> (chiamata anche <strong>dichiarazione DOCTYPE<\/strong> ) che identifica questo documento come un documento HTML5 e permette ai browser moderni di sapere che devono interpretare il documento cos\u00ec com\u2019\u00e8 scritto, secondo la specifica HTML5.<\/li>\n\n\n\n<li>Tutto il documento \u00e8 contenuto dentro un <strong>html<\/strong>. L\u2019<strong>html<\/strong> si chiama <strong>elemento radice<\/strong> perch\u00e9 contiene tutti gli elementi del documento e non pu\u00f2 essere incluso in nessun altro elemento. <\/li>\n\n\n\n<li>All\u2019interno di <strong>html<\/strong>, il documento si divide in un\u2019intestazione (head) e un corpo (body). L\u2019<strong>head<\/strong> contiene informazioni descrittive sul documento stesso, come il titolo, i fogli di stile che usa, gli script e altri tipi di informazioni \u00abmeta\u00bb. <\/li>\n\n\n\n<li>Il <strong>body<\/strong> \u00e8 il corpo della pagina: \u00e8 l\u2019elemento che contiene tutto ci\u00f2 che vogliamo far apparire nella finestra del browser.<\/li>\n\n\n\n<li>Gli elementi <strong>meta<\/strong> all\u2019interno del tag head forniscono informazioni sul documento stesso. Un elemento meta pu\u00f2 essere usato per fornire ogni tipo di informazione, ma in questo esempio specifica la codifica dei caratteri (la raccolta standardizzata di lettere, numeri e simboli) usata nel documento. <\/li>\n\n\n\n<li>All\u2019interno dell\u2019head c\u2019\u00e8 anche il tag <strong>title<\/strong>, obbligatorio. Secondo la specifica HTML, ogni documento deve contenere un titolo descrittivo. \u00c8 questo titolo che viene mostrato nella scheda del browser e che Google mostrer\u00e0 nei risultati di ricerca come titolo di questa pagina.  <\/li>\n\n\n\n<li>All\u2019interno del blocco body possiamo creare tutte le sezioni che vogliamo: il tag <strong>div<\/strong> permette di raggruppare pi\u00f9 elementi di blocco (paragrafi, intestazioni, liste, ecc.). Queste sezioni sono contenitori. <\/li>\n\n\n\n<li>\u00c8 un\u2019altra sezione uguale alla precedente.<\/li>\n<\/ol>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a9a91b175725&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a9a91b175725\" class=\"aligncenter size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"790\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2.png\" alt=\"Struttura minima di un documento HTML\" class=\"wp-image-5035\" style=\"width:533px;height:439px\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2.png 960w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2-500x411.png 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2-768x632.png 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2-600x494.png 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">Come puoi vedere nella <em>Figura<\/em>, tutti questi tag sono una sorta di contenitori: la radice, o principale, \u00e8 il tag <strong>html<\/strong> che contiene tutti gli altri; dentro <strong>html<\/strong> abbiamo il <strong>body<\/strong> e, a sua volta, dentro il <strong>body<\/strong> abbiamo altri <strong>div<\/strong>. Quindi possiamo dire che l\u2019<strong>elemento radice<\/strong> \u00e8 <strong>html<\/strong>, <strong>body<\/strong> \u00e8 figlio di <strong>html<\/strong> e i <strong>div<\/strong> sono figli di <strong>body<\/strong>. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"1-unidades-de-medida-de-elementor\">Unit\u00e0 di misura di Elementor<\/h2>\n\n<p class=\"wp-block-paragraph\" id=\"unidades\">Quando progetti con Elementor, puoi notare che alcuni elementi hanno opzioni di dimensione, che ti permettono di scegliere <strong>PX, EM, REM, %, VW<\/strong> o <strong>VH<\/strong>. Ma cosa significano davvero queste unit\u00e0 di misura e quando conviene usarne una piuttosto che un\u2019altra?  <\/p>\n\n<p class=\"wp-block-paragraph\">Partiamo dalle basi: in CSS puoi specificare dimensioni o lunghezze degli elementi usando diverse unit\u00e0 di misura. Le unit\u00e0 che trovi in alcune opzioni dei widget di Elementor includono <em>PX, EM, REM, %, VW e VH<\/em>, anche se in CSS ce ne sono molte altre. Non tutti gli elementi di Elementor offriranno tutte queste unit\u00e0: Elementor mostra solo le opzioni che hanno pi\u00f9 senso per l\u2019elemento in questione.   <\/p>\n\n<p class=\"wp-block-paragraph\">L\u2019aspetto pi\u00f9 importante da capire sulle diverse unit\u00e0 \u00e8 che alcune, come PX, sono <strong>unit\u00e0 assolute<\/strong> e altre sono <strong>unit\u00e0 relative<\/strong>.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"2-unidades-absolutas\">Unit\u00e0 assolute<\/h2>\n\n<p class=\"wp-block-paragraph\"><strong>PX<\/strong>: i pixel (px) sono considerati unit\u00e0 assolute, anche se sono relative al DPI e alla risoluzione del dispositivo di visualizzazione. Ma sul dispositivo stesso l\u2019unit\u00e0 PX \u00e8 fissa e non cambia in funzione di nessun altro elemento. L\u2019uso dei PX pu\u00f2 essere problematico per i siti web responsive, ma \u00e8 utile per mantenere una dimensione coerente per alcuni elementi. Se hai elementi che non devono ridimensionarsi, allora usare i PX \u00e8 una buona scelta.   <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"3-unidades-relativas\">Unit\u00e0 relative<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><strong>EM<\/strong>: relativo all\u2019elemento padre<\/li>\n\n\n\n<li><strong>REM<\/strong>: relativo all\u2019elemento radice (tag HTML e, in mancanza, alla dimensione configurata nel browser)<\/li>\n\n\n\n<li><strong>%<\/strong>: relativo all\u2019elemento padre<\/li>\n\n\n\n<li><strong>VW<\/strong>: relativo alla larghezza della viewport<\/li>\n\n\n\n<li><strong>VH<\/strong>: relativo all\u2019altezza della viewport<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">A differenza dei PX, le unit\u00e0 relative come %, EM e REM si adattano meglio al design responsive e aiutano anche a <strong>rispettare gli standard di accessibilit\u00e0<\/strong>. Le unit\u00e0 relative scalano meglio su dispositivi diversi perch\u00e9 possono aumentare o diminuire in base alla dimensione di un altro elemento. <\/p>\n\n<p class=\"wp-block-paragraph\">Vediamo un esempio semplice: nella maggior parte dei browser, la dimensione predefinita del font \u00e8 <strong>16px<\/strong>. Le unit\u00e0 relative calcolano la dimensione a partire da questa base. Se cambi quella base impostando una dimensione di base per il tag HTML tramite CSS, quella diventa la base per calcolare le unit\u00e0 relative nel resto della pagina. Allo stesso modo, se un utente modifica la dimensione del font, quella diventa la base per calcolare le unit\u00e0 relative.   <\/p>\n\n<p class=\"wp-block-paragraph\">Quindi, cosa significano queste unit\u00e0 rispetto al valore predefinito di 16px?<\/p>\n\n<p class=\"wp-block-paragraph\">Il numero che specifichi moltiplicher\u00e0 quel numero per la dimensione predefinita.<\/p>\n\n<p class=\"wp-block-paragraph\">1em = 16px (1 * 16)<\/p>\n\n<p class=\"wp-block-paragraph\">2em = 32 px (2 * 16)<\/p>\n\n<p class=\"wp-block-paragraph\">0.5em = 8px (.5 * 16)<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1rem = 16 px<\/p>\n\n<p class=\"wp-block-paragraph\">2rem = 32px<\/p>\n\n<p class=\"wp-block-paragraph\">0.5rem = 8px<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">100% = 16 px<\/p>\n\n<p class=\"wp-block-paragraph\">200% = 32 px<\/p>\n\n<p class=\"wp-block-paragraph\">50% = 8 px<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">Ok, perfetto, ma cosa succede se l\u2019utente cambia la dimensione predefinita nel browser? Poich\u00e9 si tratta di unit\u00e0 relative, i valori finali si baseranno sulla nuova dimensione di base. Anche se il valore predefinito del browser \u00e8 di solito 16px, se l\u2019utente lo cambiasse a 14px, le dimensioni calcolate finirebbero per essere:  <\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1em = 14px (1 * 14)<\/p>\n\n<p class=\"wp-block-paragraph\">2em = 28px (2 * 14)<\/p>\n\n<p class=\"wp-block-paragraph\">0.5em = 7px (.5 * 14)<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1rem = 14px<\/p>\n\n<p class=\"wp-block-paragraph\">2rem = 28px<\/p>\n\n<p class=\"wp-block-paragraph\">0.5rem = 7px<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">100% = 14 px<\/p>\n\n<p class=\"wp-block-paragraph\">200% = 28 px<\/p>\n\n<p class=\"wp-block-paragraph\">50% = 7px<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">Questo d\u00e0 all\u2019utente la libert\u00e0 di regolare la dimensione predefinita del font del browser, mantenendo per\u00f2 la scala relativa di ogni elemento che hai specificato.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"4-%C2%BFcu%C3%A1l-es-la-diferencia-entre-em-y-rem\">Qual \u00e8 la differenza tra EM e REM?<\/h2>\n\n<p class=\"wp-block-paragraph\">Guardando il grafico qui sopra, EM e REM sembrano esattamente uguali. Quindi, in cosa differiscono? <\/p>\n\n<p class=\"wp-block-paragraph\">In poche parole, differiscono per via dell\u2019ereditariet\u00e0. Come detto, <strong>REM<\/strong> si basa sull\u2019<strong>elemento radice<\/strong> (HTML) e, se non \u00e8 impostato, su quello del browser dell\u2019utente, che <strong>per impostazione predefinita \u00e8 16px<\/strong>. Ogni elemento figlio che usa <strong>REM<\/strong> user\u00e0 la dimensione della radice HTML come punto di calcolo, indipendentemente dal fatto che un elemento padre abbia o meno dimensioni diverse specificate.  <\/p>\n\n<p class=\"wp-block-paragraph\"><strong>EM<\/strong>, invece, si basa sulla dimensione del font dell\u2019elemento padre. Se un elemento padre ha una dimensione diversa da quella dell\u2019elemento radice, il calcolo degli <strong>EM<\/strong> si baser\u00e0 sull\u2019elemento padre e non sull\u2019elemento radice. Questo significa che gli elementi annidati che usano <strong>EM<\/strong> per dimensionarsi a volte possono finire con una dimensione che non ti aspettavi. D\u2019altra parte, ti d\u00e0 un controllo pi\u00f9 dettagliato se ti serve per specificare la dimensione di un\u2019area particolare della pagina.   <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"5-entonces-%C2%BFqu%C3%A9-pasa-con-vw-y-vh-%C2%BFde-qu%C3%A9-se-tratan\">E quindi, che dire di %, VW e VH? Di cosa si tratta? <\/h2>\n\n<p class=\"wp-block-paragraph\">Mentre <strong>PX<\/strong>, <strong>EM<\/strong> e <strong>REM<\/strong> si usano principalmente per la dimensione del font, <strong>%<\/strong>, <strong>VW<\/strong> e <strong>VH<\/strong> si usano soprattutto per margini, padding, spaziatura e larghezze\/altezze.<\/p>\n\n<p class=\"wp-block-paragraph\">Per ribadire: <strong>VH<\/strong> significa \u00abviewport height\u00bb (altezza della viewport), cio\u00e8 l\u2019altezza dello schermo visibile. <strong>100VH<\/strong> rappresenterebbe il 100% dell\u2019altezza della viewport, ovvero l\u2019altezza completa dello schermo. E, naturalmente, <strong>VW<\/strong> significa \u00abviewport width\u00bb (larghezza della viewport), cio\u00e8 la larghezza dello schermo visibile. <strong>100VW<\/strong> rappresenterebbe il 100% della larghezza della viewport, ovvero la larghezza completa dello schermo. <strong>%<\/strong> riflette una percentuale della dimensione dell\u2019<strong>elemento padre<\/strong>, indipendentemente dalla dimensione della viewport. <\/p>\n\n<p class=\"wp-block-paragraph\">Vediamo alcuni esempi di dove Elementor offre opzioni di <strong>%<\/strong>, <strong>VW<\/strong> e <strong>VH<\/strong>.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Larghezze delle colonne<\/strong>: se modifichi il layout di una colonna in Elementor, noterai che \u00e8 disponibile solo un\u2019unit\u00e0 di larghezza: %. Le larghezze delle colonne funzionano bene e in modo responsive solo quando si usano percentuali, quindi non viene offerta nessun\u2019altra opzione. <\/li>\n\n\n\n<li><strong>Margini<\/strong>: i margini di una sezione possono essere specificati in PX o %. In genere \u00e8 preferibile usare % per garantire che i margini non siano pi\u00f9 grandi del contenuto quando si ridimensiona per un dispositivo mobile, per esempio. Usando una percentuale della larghezza del dispositivo, i margini resteranno in relazione alla dimensione del contenuto, cosa quasi sempre preferibile.  <\/li>\n\n\n\n<li><strong>Padding<\/strong>: il padding di una sezione pu\u00f2 essere specificato in PX, EM o %. Come per i margini, spesso \u00e8 preferibile usare EM o % affinch\u00e9 il padding resti relativo man mano che aumenta la dimensione della pagina. <\/li>\n\n\n\n<li><strong>Dimensione del font<\/strong>: se modifichi la tipografia di un elemento, come un\u2019intestazione, vedrai quattro opzioni: PX, EM, REM e VH.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Ti \u00e8 mai capitato di creare un\u2019intestazione grande e di ammirare quanto stesse bene su desktop, per poi renderti conto che su mobile era troppo grande?<\/p>\n\n<p class=\"wp-block-paragraph\">La chiave per risolvere la cosa in modo elegante \u00e8 usare EM, REM o VW invece di PX. La scelta dipende dalla tua situazione specifica. Di solito scelgo EM perch\u00e9 voglio che la dimensione sia relativa al padre dell\u2019intestazione. Ma se preferisci che la dimensione sia relativa alla radice (HTML), scegli REM. Oppure puoi impostarla in modo che sia relativa alla larghezza della viewport (VW) se per il tuo caso funziona meglio.     <\/p>\n\n<p class=\"wp-block-paragraph\">Tieni presente che puoi anche impostare valori PX specifici per dispositivo usando le icone dei dispositivi per definire una dimensione per desktop, tablet e mobile. Ma questo impone comunque limiti alla responsivit\u00e0 e all\u2019accessibilit\u00e0, quindi consideralo se scegli i PX. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"6-m%C3%A1s-sobre-vw-y-vh\">Di pi\u00f9 su VW e VH<\/h2>\n\n<p class=\"wp-block-paragraph\">Le unit\u00e0 della viewport rappresentano una percentuale della viewport del browser corrente (dimensione attuale del browser). Anche se sono simili alle unit\u00e0 percentuali, c\u2019\u00e8 una differenza: le unit\u00e0 della viewport si calcolano come percentuale della dimensione attuale della viewport del browser. Le unit\u00e0 percentuali, invece, si calcolano come percentuale dell\u2019<strong>elemento padre<\/strong>, che pu\u00f2 essere diversa dalla dimensione della viewport.   <\/p>\n\n<p class=\"wp-block-paragraph\">Consideriamo un esempio di viewport su schermo mobile di 480px x 800px.<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1 VW = 1% della larghezza della viewport (ovvero 4,8 px)<\/p>\n\n<p class=\"wp-block-paragraph\">50 VW = 50% della larghezza della viewport (ovvero 240 px)<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1 VH = 1% dell\u2019altezza della viewport (ovvero 8px)<\/p>\n\n<p class=\"wp-block-paragraph\">50 VH = 50% dell\u2019altezza della viewport (ovvero 400 px)<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">Se la dimensione della viewport cambia, la dimensione dell\u2019elemento cambia di conseguenza.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"7-%C2%BFcu%C3%A1ndo-deber%C3%ADa-usar-una-unidad-sobre-otra\">Quando dovresti usare un\u2019unit\u00e0 invece di un\u2019altra?<\/h2>\n\n<p class=\"wp-block-paragraph\">In definitiva, non esiste una risposta perfetta a questa domanda. In generale, spesso \u00e8 meglio scegliere una delle unit\u00e0 relative invece dei PX, cos\u00ec la tua pagina web ha pi\u00f9 possibilit\u00e0 di rendere un design responsive. Tuttavia, scegli <strong>PX<\/strong> se devi assicurarti che un elemento non cambi mai dimensione in nessun breakpoint e resti uguale indipendentemente dal fatto che un utente abbia scelto una dimensione predefinita diversa. Le unit\u00e0 PX garantiscono risultati coerenti anche se non \u00e8 l\u2019ideale.   <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>EM<\/strong> \u00e8 relativo alla dimensione del font dell\u2019elemento padre, quindi se vuoi scalare la dimensione dell\u2019elemento in base a quella del suo padre, usa EM.<\/li>\n\n\n\n<li><strong>REM<\/strong> \u00e8 relativo alla dimensione del font della radice (HTML) e, se non \u00e8 impostata, verr\u00e0 usata quella configurata nel browser; quindi, se vuoi scalare la dimensione dell\u2019elemento in base alla dimensione della radice, indipendentemente dalla dimensione del padre, usa REM. Se hai usato EM e stai riscontrando problemi di dimensioni a causa di molti elementi annidati, REM probabilmente \u00e8 la scelta migliore. <\/li>\n\n\n\n<li><strong>VW<\/strong> \u00e8 utile per creare elementi a larghezza piena (100%) che riempiono tutta la larghezza della viewport. Naturalmente, puoi usare qualsiasi percentuale della larghezza della viewport per raggiungere altri obiettivi, come il 50% per met\u00e0 larghezza, ecc. <\/li>\n\n\n\n<li><strong>VH<\/strong> \u00e8 utile per creare elementi a altezza piena (100%) che riempiono tutta l\u2019altezza della viewport. Naturalmente, puoi usare qualsiasi percentuale dell\u2019altezza della viewport per raggiungere altri obiettivi, come il 50% per met\u00e0 altezza, ecc. <\/li>\n\n\n\n<li><strong>%<\/strong> \u00e8 simile a VW e VH, ma non \u00e8 una lunghezza relativa alla larghezza o all\u2019altezza della viewport. \u00c8 invece una percentuale della larghezza o dell\u2019altezza dell\u2019elemento padre. Le unit\u00e0 percentuali sono spesso utili, ad esempio, per impostare la larghezza dei margini.  <\/li>\n\n\n\n<li>Elementor rende facile scegliere l\u2019opzione che si adatta meglio al tuo design. In definitiva, la scelta \u00e8 tua. <\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Video passo dopo passo Struttura di base di un documento HTML Come diceva Carl Sagan, \u00abSe vuoi fare una torta di mele da zero, devi prima inventare l\u2019universo\u00bb, e s\u00ec: per capire le unit\u00e0 relative di Elementor, cos\u2019\u00e8 un elemento padre o il contenitore radice, ecc., prima dobbiamo sapere come si struttura, in modo basilare, [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":7171,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"PX, EM, REM, VW e VH: guida alle unit\u00e0 CSS responsive","_seopress_titles_desc":"Struttura di base di un documento HTML Come diceva Carl Sagan, \u00abSe vuoi fare una torta di mele da zero, devi prima inventare l\u2019universo\u00bb\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"entrambi","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[453],"tags":[408,430,407],"class_list":["post-7170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-elementor","tag-personalizzazione-di-wordpress","tag-web-design"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/posts\/7170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/comments?post=7170"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/posts\/7170\/revisions"}],"predecessor-version":[{"id":7172,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/posts\/7170\/revisions\/7172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/media\/7171"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/media?parent=7170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/categories?post=7170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/tags?post=7170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}