{"id":7179,"date":"2021-07-20T21:06:17","date_gmt":"2021-07-20T19:06:17","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/quelle-est-la-difference-entre-px-em-rem-vw-et-vh\/"},"modified":"2026-09-02T23:09:45","modified_gmt":"2026-09-02T21:09:45","slug":"quelle-est-la-difference-entre-px-em-rem-vw-et-vh","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/fr\/quelle-est-la-difference-entre-px-em-rem-vw-et-vh\/","title":{"rendered":"Quelle est la diff\u00e9rence entre PX, EM, REM, %, VW et VH ?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Vid\u00e9o \u00e9tape par \u00e9tape<\/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\">Structure de base d&rsquo;un document HTML<\/h2>\n\n<p class=\"wp-block-paragraph\">Comme le disait Carl Sagan, <a href=\"https:\/\/www.youtube.com\/watch?v=LTo31PjL05c\" target=\"_blank\" rel=\"noreferrer noopener\">\u00ab Si vous voulez faire <em>une tarte aux pommes \u00e0 partir de z\u00e9ro, vous devez d&rsquo;abord inventer l&rsquo;univers<\/em> \u00bb<\/a>, et oui, pour pouvoir comprendre les unit\u00e9s relatives d&rsquo;Elementor, ce qu&rsquo;est un \u00e9l\u00e9ment parent ou le conteneur racine, etc., nous devons d&rsquo;abord savoir comment se structure de mani\u00e8re basique une page web en langage HTML.<\/p>\n\n<p class=\"wp-block-paragraph\">Nous voyons ici la structure minimale d&rsquo;un document HTML (HyperText Markup Language), le langage HTML est compos\u00e9 de balises d\u00e9limit\u00e9es par les signes inf\u00e9rieur \u00e0  <strong>&lt;<\/strong>  et sup\u00e9rieur \u00e0  <strong>&gt;<\/strong> : exemple  &lt;html&gt;, sauf exceptions comme la premi\u00e8re balise  &lt;!DOCTYPE html&gt;  qui est absolue, toutes les balises ont une ouverture et une fermeture, exemple  <strong>&lt;h1&gt;<\/strong>En-t\u00eate<strong>&lt;\/h1&gt;<\/strong>, la fermeture se distingue car l&rsquo;ouverture de la balise inclut <strong><span class=\"has-inline-color has-black-color\">&lt;\/<\/span><\/strong> en plus du \u00ab inf\u00e9rieur \u00e0 \u00bb la barre oblique \u00e9galement appel\u00e9e <strong>slash<\/strong> <strong>\/<\/strong>.<\/p>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a99638da6124&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a99638da6124\" 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=\"Structure minimale d'un document 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 premi\u00e8re ligne de l&rsquo;exemple est un \u00e9l\u00e9ment absolu (il n&rsquo;a pas de balise de fermeture) ; c&rsquo;est une <strong>d\u00e9claration de type de document<\/strong> (\u00e9galement appel\u00e9e <strong>d\u00e9claration DOCTYPE<\/strong>) qui identifie ce document comme un document HTML5 et permet aux navigateurs modernes de savoir qu&rsquo;ils doivent interpr\u00e9ter le document tel qu&rsquo;il est \u00e9crit conform\u00e9ment \u00e0 la sp\u00e9cification HTML5.<\/li>\n\n\n\n<li>L&rsquo;ensemble du document est contenu dans un <strong>html<\/strong>. Le <strong>html<\/strong> est appel\u00e9 <strong>\u00e9l\u00e9ment racine<\/strong> car il contient tous les \u00e9l\u00e9ments du document et ne peut \u00eatre inclus dans aucun autre \u00e9l\u00e9ment. <\/li>\n\n\n\n<li>\u00c0 l&rsquo;int\u00e9rieur du <strong>html<\/strong>, le document est divis\u00e9 en un en-t\u00eate (head) et un corps (body). Le <strong>head<\/strong> contient des informations descriptives sur le document lui-m\u00eame, telles que son titre, les feuilles de style qu&rsquo;il utilise, les scripts et d&rsquo;autres types d&rsquo;informations \u00ab m\u00e9ta \u00bb. <\/li>\n\n\n\n<li>Le <strong>body<\/strong> est le corps de la page, c&rsquo;est l&rsquo;\u00e9l\u00e9ment qui contient tout ce que nous voulons voir appara\u00eetre dans la fen\u00eatre du navigateur.<\/li>\n\n\n\n<li>Les \u00e9l\u00e9ments <strong>meta<\/strong> \u00e0 l&rsquo;int\u00e9rieur de la balise head fournissent des informations sur le document lui-m\u00eame. Un \u00e9l\u00e9ment meta peut \u00eatre utilis\u00e9 pour fournir toutes sortes d&rsquo;informations, mais dans le cas de cet exemple, il sp\u00e9cifie l&rsquo;encodage de caract\u00e8res (la collection standardis\u00e9e de lettres, chiffres et symboles) utilis\u00e9 dans le document. <\/li>\n\n\n\n<li>\u00c0 l&rsquo;int\u00e9rieur du head se trouve \u00e9galement la balise <strong>title<\/strong> obligatoire. Selon la sp\u00e9cification HTML, chaque document doit contenir un titre descriptif. C&rsquo;est ce titre qui s&rsquo;affiche dans l&rsquo;onglet du navigateur et que Google affichera dans la liste de recherche comme titre de cette page.  <\/li>\n\n\n\n<li>\u00c0 l&rsquo;int\u00e9rieur du bloc body, nous pouvons cr\u00e9er autant de sections que nous le souhaitons, la balise <strong>div<\/strong>, cette balise permet de regrouper plusieurs \u00e9l\u00e9ments de bloc (paragraphes, en-t\u00eates, listes, etc.). Ces sections sont des conteneurs. <\/li>\n\n\n\n<li>C&rsquo;est une autre section identique \u00e0 la pr\u00e9c\u00e9dente.<\/li>\n<\/ol>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a99638da6a71&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a99638da6a71\" 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=\"Structure minimale d'un document 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\">Comme vous pouvez le voir dans la <em>Figure<\/em>, toutes ces balises sont comme une sorte de conteneurs, la racine ou la principale est la balise <strong>html<\/strong> qui contient toutes les autres, \u00e0 l&rsquo;int\u00e9rieur de <strong>html<\/strong> nous avons le <strong>body<\/strong>, et \u00e0 son tour \u00e0 l&rsquo;int\u00e9rieur du <strong>body<\/strong> nous avons d&rsquo;autres <strong>div<\/strong>. Nous pouvons donc dire que l&rsquo;<strong>\u00e9l\u00e9ment racine<\/strong> est <strong>html<\/strong>, <strong>body<\/strong> est enfant de <strong>html<\/strong> et les <strong>div<\/strong> sont enfants de <strong>body<\/strong>. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"1-unidades-de-medida-de-elementor\">Unit\u00e9s de mesure d&rsquo;Elementor<\/h2>\n\n<p class=\"wp-block-paragraph\" id=\"unidades\">Lors de la conception avec Elementor, vous pouvez constater que certains \u00e9l\u00e9ments ont des options de taille, vous permettant de choisir <strong>PX, EM, REM, %, VW<\/strong> ou <strong>VH<\/strong>. Mais que signifient r\u00e9ellement ces unit\u00e9s de mesure et quand devriez-vous utiliser l&rsquo;une ou l&rsquo;autre ?  <\/p>\n\n<p class=\"wp-block-paragraph\">Commen\u00e7ons par les bases, en CSS, vous pouvez sp\u00e9cifier des tailles ou des longueurs d&rsquo;\u00e9l\u00e9ments en utilisant diverses unit\u00e9s de mesure. Les unit\u00e9s de mesure que vous trouverez dans certaines options des widgets d&rsquo;Elementor incluent <em>PX, EM, REM, %, VW et VH<\/em>, bien qu&rsquo;il y en ait plusieurs autres disponibles en CSS. Tous les \u00e9l\u00e9ments d&rsquo;Elementor n&rsquo;offriront pas toutes ces unit\u00e9s. Elementor ne pr\u00e9sente que les options qui ont le plus de sens pour l&rsquo;\u00e9l\u00e9ment donn\u00e9.   <\/p>\n\n<p class=\"wp-block-paragraph\">L&rsquo;aspect le plus important \u00e0 apprendre sur les diff\u00e9rentes unit\u00e9s est que certaines unit\u00e9s, comme PX, sont des <strong>unit\u00e9s absolues<\/strong> et d&rsquo;autres sont des <strong>unit\u00e9s relatives<\/strong>.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"2-unidades-absolutas\">Unit\u00e9s absolues<\/h2>\n\n<p class=\"wp-block-paragraph\"><strong>PX<\/strong> : les pixels (px) sont consid\u00e9r\u00e9s comme des unit\u00e9s absolues, bien qu&rsquo;ils soient relatifs au DPI et \u00e0 la r\u00e9solution du dispositif d&rsquo;affichage. Mais sur le dispositif lui-m\u00eame, l&rsquo;unit\u00e9 PX est fixe et ne change pas en fonction d&rsquo;un autre \u00e9l\u00e9ment. L&rsquo;utilisation de PX peut \u00eatre probl\u00e9matique pour les sites web responsives, mais ils sont utiles pour maintenir une taille coh\u00e9rente pour certains \u00e9l\u00e9ments. Si vous avez des \u00e9l\u00e9ments dont la taille ne doit pas \u00eatre modifi\u00e9e, alors utiliser PX est une bonne option.   <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"3-unidades-relativas\">Unit\u00e9s relatives<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><strong>EM<\/strong> : relatif \u00e0 l&rsquo;\u00e9l\u00e9ment parent<\/li>\n\n\n\n<li><strong>REM<\/strong> : relatif \u00e0 l&rsquo;\u00e9l\u00e9ment racine (balise HTML et par d\u00e9faut la taille configur\u00e9e dans le navigateur)<\/li>\n\n\n\n<li><strong>%<\/strong> : relatif \u00e0 l&rsquo;\u00e9l\u00e9ment parent<\/li>\n\n\n\n<li><strong>VW<\/strong> : relatif \u00e0 la largeur de la fen\u00eatre d&rsquo;affichage<\/li>\n\n\n\n<li><strong>VH<\/strong> : relatif \u00e0 la hauteur de la fen\u00eatre d&rsquo;affichage<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Contrairement \u00e0 PX, les unit\u00e9s relatives comme %, EM et REM s&rsquo;adaptent mieux au design responsive et aident \u00e9galement \u00e0 <strong>respecter les normes d&rsquo;accessibilit\u00e9<\/strong>. Les unit\u00e9s relatives s&rsquo;adaptent mieux sur diff\u00e9rents dispositifs car elles peuvent s&rsquo;agrandir ou se r\u00e9duire en fonction de la taille d&rsquo;un autre \u00e9l\u00e9ment. <\/p>\n\n<p class=\"wp-block-paragraph\">Prenons un exemple simple, dans la plupart des navigateurs, la taille de police par d\u00e9faut est <strong>16px<\/strong>. Les unit\u00e9s relatives calculent la taille \u00e0 partir de cette base. Si vous modifiez cette base en d\u00e9finissant une taille de base pour la balise HTML via CSS, cela devient la base pour calculer les unit\u00e9s relatives dans le reste de la page. De m\u00eame, si un utilisateur ajuste sa taille de police, cela devient la base pour calculer les unit\u00e9s relatives.   <\/p>\n\n<p class=\"wp-block-paragraph\">Alors, que signifient ces unit\u00e9s lorsqu&rsquo;il s&rsquo;agit de la valeur par d\u00e9faut de 16px ?<\/p>\n\n<p class=\"wp-block-paragraph\">Le nombre que vous sp\u00e9cifiez multipliera ce nombre par la taille par d\u00e9faut.<\/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\">Bien, parfait, mais que se passe-t-il si l&rsquo;utilisateur modifie la taille par d\u00e9faut dans son navigateur ? Parce qu&rsquo;il s&rsquo;agit d&rsquo;unit\u00e9s relatives, les valeurs de taille finales seront bas\u00e9es sur la nouvelle taille de base. Bien que la valeur par d\u00e9faut du navigateur soit g\u00e9n\u00e9ralement de 16px, si l&rsquo;utilisateur la changeait \u00e0 14px, les tailles calcul\u00e9es finiraient par \u00eatre :  <\/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\">Cela donne \u00e0 l&rsquo;utilisateur la libert\u00e9 d&rsquo;ajuster la taille de police par d\u00e9faut de son navigateur, tout en maintenant l&rsquo;\u00e9chelle relative de chaque \u00e9l\u00e9ment que vous avez sp\u00e9cifi\u00e9.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"4-%C2%BFcu%C3%A1l-es-la-diferencia-entre-em-y-rem\">Quelle est la diff\u00e9rence entre EM et REM ?<\/h2>\n\n<p class=\"wp-block-paragraph\">En regardant le graphique ci-dessus, il montre EM et REM avec exactement le m\u00eame aspect. Alors, en quoi diff\u00e8rent-ils ? <\/p>\n\n<p class=\"wp-block-paragraph\">En bref, ils diff\u00e8rent selon l&rsquo;h\u00e9ritage. Comme mentionn\u00e9, <strong>REM<\/strong> est bas\u00e9 sur l&rsquo;<strong>\u00e9l\u00e9ment racine<\/strong> (HTML) et par d\u00e9faut, s&rsquo;il n&rsquo;est pas d\u00e9fini, celui du navigateur de l&rsquo;utilisateur, qui <strong>par d\u00e9faut est \u00e0 16px<\/strong>. Chaque \u00e9l\u00e9ment enfant qui utilise <strong>REM<\/strong> utilisera la taille de la racine HTML comme point de calcul, ind\u00e9pendamment du fait qu&rsquo;un \u00e9l\u00e9ment parent ait ou non des tailles diff\u00e9rentes sp\u00e9cifi\u00e9es.  <\/p>\n\n<p class=\"wp-block-paragraph\"><strong>EM<\/strong>, en revanche, est bas\u00e9 sur la taille de police de l&rsquo;\u00e9l\u00e9ment parent. Si un \u00e9l\u00e9ment parent a une taille diff\u00e9rente de celle de l&rsquo;\u00e9l\u00e9ment racine, le calcul de <strong>EM<\/strong> sera bas\u00e9 sur l&rsquo;\u00e9l\u00e9ment parent et non sur l&rsquo;\u00e9l\u00e9ment racine. Cela signifie que les \u00e9l\u00e9ments imbriqu\u00e9s qui utilisent <strong>EM<\/strong> pour le dimensionnement peuvent parfois finir par avoir une taille que vous n&rsquo;aviez pas anticip\u00e9e. D&rsquo;un autre c\u00f4t\u00e9, cela vous donne un contr\u00f4le plus pr\u00e9cis si vous en avez besoin pour sp\u00e9cifier la taille d&rsquo;une zone particuli\u00e8re d&rsquo;une page.   <\/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\">Alors, qu&rsquo;en est-il de %, VW et VH ? De quoi s&rsquo;agit-il ? <\/h2>\n\n<p class=\"wp-block-paragraph\">Alors que <strong>PX<\/strong>, <strong>EM<\/strong> et <strong>REM<\/strong> sont principalement utilis\u00e9s pour la taille de police, <strong>%<\/strong>, <strong>VW<\/strong> et <strong>VH<\/strong> sont principalement utilis\u00e9s pour les marges, le remplissage, l&rsquo;espacement et les largeurs\/hauteurs.<\/p>\n\n<p class=\"wp-block-paragraph\">Pour r\u00e9it\u00e9rer, <strong>VH<\/strong> signifie \u00ab viewport height \u00bb (hauteur de la fen\u00eatre d&rsquo;affichage), qui est la hauteur de l&rsquo;\u00e9cran visible. <strong>100VH<\/strong> repr\u00e9senterait 100 % de la hauteur de la fen\u00eatre d&rsquo;affichage ou la hauteur compl\u00e8te de l&rsquo;\u00e9cran. Et, bien s\u00fbr, <strong>VW<\/strong> signifie \u00ab viewport width \u00bb (largeur de la fen\u00eatre d&rsquo;affichage), qui est la largeur de l&rsquo;\u00e9cran visible. <strong>100VW<\/strong> repr\u00e9senterait 100 % de la largeur de la fen\u00eatre d&rsquo;affichage ou la largeur compl\u00e8te de l&rsquo;\u00e9cran. <strong>%<\/strong> refl\u00e8te un pourcentage de la taille de l&rsquo;<strong>\u00e9l\u00e9ment parent<\/strong>, ind\u00e9pendamment de la taille de la fen\u00eatre d&rsquo;affichage. <\/p>\n\n<p class=\"wp-block-paragraph\">Voyons quelques exemples o\u00f9 Elementor offre des options de <strong>%<\/strong>, <strong>VW<\/strong> et <strong>VH<\/strong>.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Largeurs de colonne<\/strong> : si vous modifiez la mise en page d&rsquo;une colonne d&rsquo;Elementor, vous remarquerez qu&rsquo;il n&rsquo;y a qu&rsquo;une seule unit\u00e9 de taille de largeur disponible : %. Les largeurs de colonne ne fonctionnent bien et de mani\u00e8re responsive que lorsqu&rsquo;on utilise des pourcentages, donc aucune autre option n&rsquo;est propos\u00e9e. <\/li>\n\n\n\n<li><strong>Marges<\/strong> : les marges d&rsquo;une section peuvent \u00eatre sp\u00e9cifi\u00e9es en PX ou %. En g\u00e9n\u00e9ral, il est pr\u00e9f\u00e9rable d&rsquo;utiliser % pour garantir que les marges ne soient pas plus grandes que le contenu lors de la r\u00e9duction d&rsquo;\u00e9chelle pour un dispositif mobile, par exemple. En utilisant un pourcentage de la largeur du dispositif, vos marges resteront proportionnelles \u00e0 la taille du contenu, ce qui est presque toujours pr\u00e9f\u00e9rable.  <\/li>\n\n\n\n<li><strong>Remplissage<\/strong> : le remplissage d&rsquo;une section peut \u00eatre sp\u00e9cifi\u00e9 en PX, EM ou %. Comme pour les marges, il est souvent pr\u00e9f\u00e9rable d&rsquo;utiliser EM ou % pour que le remplissage reste relatif \u00e0 mesure que la taille de la page augmente. <\/li>\n\n\n\n<li><strong>Taille de police<\/strong> : si vous modifiez la typographie d&rsquo;un \u00e9l\u00e9ment, comme un en-t\u00eate, vous verrez quatre options : PX, EM, REM et VH.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Avez-vous d\u00e9j\u00e0 cr\u00e9\u00e9 un en-t\u00eate de grande taille et admir\u00e9 \u00e0 quel point il \u00e9tait beau sur le bureau, pour vous rendre compte qu&rsquo;il \u00e9tait trop grand sur mobile ?<\/p>\n\n<p class=\"wp-block-paragraph\">La cl\u00e9 pour r\u00e9soudre cela de mani\u00e8re \u00e9l\u00e9gante est d&rsquo;utiliser EM, REM ou VW au lieu de PX. Ce que vous choisissez d\u00e9pend de votre situation particuli\u00e8re. En g\u00e9n\u00e9ral, je choisis EM car je veux que la taille soit relative au parent de l&rsquo;en-t\u00eate. Mais si vous pr\u00e9f\u00e9rez que la taille soit relative \u00e0 la taille de la racine (HTML), choisissez REM \u00e0 la place. Ou bien, vous pouvez le configurer pour qu&rsquo;il soit relatif \u00e0 la largeur de la fen\u00eatre d&rsquo;affichage (VW) si cela fonctionne mieux pour votre cas.     <\/p>\n\n<p class=\"wp-block-paragraph\">Notez que vous pouvez \u00e9galement d\u00e9finir des valeurs PX de taille de police sp\u00e9cifiques par dispositif en utilisant les ic\u00f4nes de dispositif pour sp\u00e9cifier une taille pour ordinateur de bureau, tablette et dispositif mobile. Mais cela impose toujours des limites \u00e0 la r\u00e9activit\u00e9 et \u00e0 l&rsquo;accessibilit\u00e9, alors gardez cela \u00e0 l&rsquo;esprit si vous choisissez PX. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"6-m%C3%A1s-sobre-vw-y-vh\">Plus sur VW et VH<\/h2>\n\n<p class=\"wp-block-paragraph\">Les unit\u00e9s de la fen\u00eatre d&rsquo;affichage repr\u00e9sentent un pourcentage de la fen\u00eatre d&rsquo;affichage actuelle du navigateur (taille actuelle du navigateur). Bien que similaire aux unit\u00e9s de pourcentage, il y a une diff\u00e9rence. Les unit\u00e9s de la fen\u00eatre d&rsquo;affichage sont calcul\u00e9es comme un pourcentage de la taille actuelle de la fen\u00eatre d&rsquo;affichage du navigateur. Les unit\u00e9s de pourcentage, en revanche, sont calcul\u00e9es comme un pourcentage de l&rsquo;<strong>\u00e9l\u00e9ment parent<\/strong>, qui peut \u00eatre diff\u00e9rent de la taille de la fen\u00eatre d&rsquo;affichage.   <\/p>\n\n<p class=\"wp-block-paragraph\">Consid\u00e9rons un exemple d&rsquo;une fen\u00eatre d&rsquo;affichage d&rsquo;\u00e9cran mobile de 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 % de la largeur de la fen\u00eatre d&rsquo;affichage (ou 4,8 px)<\/p>\n\n<p class=\"wp-block-paragraph\">50 VW = 50 % de la largeur de la fen\u00eatre d&rsquo;affichage (ou 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 % de la hauteur de la fen\u00eatre d&rsquo;affichage (ou 8px)<\/p>\n\n<p class=\"wp-block-paragraph\">50 VH = 50 % de la hauteur de la fen\u00eatre d&rsquo;affichage (ou 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\">Si la taille de la fen\u00eatre d&rsquo;affichage change, la taille de l&rsquo;\u00e9l\u00e9ment change respectivement.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"7-%C2%BFcu%C3%A1ndo-deber%C3%ADa-usar-una-unidad-sobre-otra\">Quand devrais-je utiliser une unit\u00e9 plut\u00f4t qu&rsquo;une autre ?<\/h2>\n\n<p class=\"wp-block-paragraph\">En fin de compte, il n&rsquo;existe pas de r\u00e9ponse parfaite \u00e0 cette question. En g\u00e9n\u00e9ral, il est souvent pr\u00e9f\u00e9rable de choisir l&rsquo;une des unit\u00e9s relatives plut\u00f4t que PX pour que votre page web ait la meilleure chance de rendre un design responsive. Cependant, choisissez <strong>PX<\/strong> si vous devez vous assurer qu&rsquo;un \u00e9l\u00e9ment ne change jamais de taille \u00e0 aucun point de rupture et reste le m\u00eame ind\u00e9pendamment du fait qu&rsquo;un utilisateur ait choisi une taille par d\u00e9faut diff\u00e9rente. Les unit\u00e9s PX garantissent des r\u00e9sultats coh\u00e9rents m\u00eame si ce n&rsquo;est pas id\u00e9al.   <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>EM<\/strong> est relatif \u00e0 la taille de police de l&rsquo;\u00e9l\u00e9ment parent, donc si vous souhaitez adapter la taille de l&rsquo;\u00e9l\u00e9ment en fonction de la taille de son parent, utilisez EM.<\/li>\n\n\n\n<li><strong>REM<\/strong> est relatif \u00e0 la taille de police de la racine (HTML) et si celle-ci n&rsquo;est pas d\u00e9finie, celle configur\u00e9e dans le navigateur sera utilis\u00e9e, donc si vous souhaitez adapter la taille de l&rsquo;\u00e9l\u00e9ment en fonction de la taille de la racine, quelle que soit la taille du parent, utilisez REM. Si vous avez utilis\u00e9 EM et rencontrez des probl\u00e8mes de taille en raison de nombreux \u00e9l\u00e9ments imbriqu\u00e9s, REM est probablement le meilleur choix. <\/li>\n\n\n\n<li><strong>VW<\/strong> est utile pour cr\u00e9er des \u00e9l\u00e9ments de largeur compl\u00e8te (100 %) qui remplissent toute la largeur de la fen\u00eatre d&rsquo;affichage. Bien s\u00fbr, vous pouvez utiliser n&rsquo;importe quel pourcentage de la largeur de la fen\u00eatre d&rsquo;affichage pour atteindre d&rsquo;autres objectifs, comme 50 % pour la moiti\u00e9 de la largeur, etc. <\/li>\n\n\n\n<li><strong>VH<\/strong> est utile pour cr\u00e9er des \u00e9l\u00e9ments de hauteur compl\u00e8te (100 %) qui remplissent toute la hauteur de la fen\u00eatre d&rsquo;affichage. Bien s\u00fbr, vous pouvez utiliser n&rsquo;importe quel pourcentage de la hauteur de la fen\u00eatre d&rsquo;affichage pour atteindre d&rsquo;autres objectifs, comme 50 % pour la moiti\u00e9 de la hauteur, etc. <\/li>\n\n\n\n<li><strong>%<\/strong> est similaire \u00e0 VW et VH, mais ce n&rsquo;est pas une longueur relative \u00e0 la largeur ou \u00e0 la hauteur de la fen\u00eatre d&rsquo;affichage. Au lieu de cela, c&rsquo;est un pourcentage de la largeur ou de la hauteur de l&rsquo;\u00e9l\u00e9ment parent. Les unit\u00e9s de pourcentage sont g\u00e9n\u00e9ralement utiles pour d\u00e9finir la largeur des marges, par exemple.  <\/li>\n\n\n\n<li>Elementor facilite le choix de l&rsquo;option qui convient le mieux \u00e0 votre design. En fin de compte, c&rsquo;est votre choix. <\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Vid\u00e9o \u00e9tape par \u00e9tape Structure de base d&rsquo;un document HTML Comme le disait Carl Sagan, \u00ab Si vous voulez faire une tarte aux pommes \u00e0 partir de z\u00e9ro, vous devez d&rsquo;abord inventer l&rsquo;univers \u00bb, et oui, pour pouvoir comprendre les unit\u00e9s relatives d&rsquo;Elementor, ce qu&rsquo;est un \u00e9l\u00e9ment parent ou le conteneur racine, etc., nous devons [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":7180,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Comprendre PX, EM, REM, VW et VH en CSS","_seopress_titles_desc":"Structure de base d'un document HTML Comme le disait Carl Sagan, \u00ab Si vous voulez faire une tarte aux pommes \u00e0 partir de z\u00e9ro, vous devez d'abord inventer l'univers \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":"both","_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":[454],"tags":[431,442,428],"class_list":["post-7179","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-conception-web","tag-elementor","tag-personnalisation-de-wordpress"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/7179","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/comments?post=7179"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/7179\/revisions"}],"predecessor-version":[{"id":7181,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/7179\/revisions\/7181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/7180"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=7179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/categories?post=7179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/tags?post=7179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}