{"id":40996,"date":"2021-07-20T21:06:17","date_gmt":"2021-07-20T19:06:17","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/quelle-est-la-difference-entre-px-em-rem-vw-et-vh\/"},"modified":"2023-08-29T14:21:53","modified_gmt":"2023-08-29T12:21:53","slug":"quelle-est-la-difference-entre-px-em-rem-vw-et-vh","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/fr\/elementor-academy-temas\/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<ul class=\"wp-block-advgb-summary advgb-toc alignnone\"><li class=\"toc-level-1\"><a href=\"#0-estructura-b%C3%A1sica-de-un-documento-html\">Structure de base d&#8217;un document HTML<\/a><\/li><li class=\"toc-level-1\"><a href=\"#1-unidades-de-medida-de-elementor\">Unit\u00e9s de mesure d&#8217;Elementor<\/a><\/li><li class=\"toc-level-1\"><a href=\"#2-unidades-absolutas\">Unit\u00e9s absolues<\/a><\/li><li class=\"toc-level-1\"><a href=\"#3-unidades-relativas\">Unit\u00e9s relatives<\/a><\/li><li class=\"toc-level-1\"><a href=\"#4-%C2%BFcu%C3%A1l-es-la-diferencia-entre-em-y-rem\">Quelle est la diff\u00e9rence entre la SEP et le REM ?<\/a><\/li><li class=\"toc-level-1\"><a href=\"#5-entonces-%C2%BFqu%C3%A9-pasa-con-vw-y-vh-%C2%BFde-qu%C3%A9-se-tratan\">Qu&#8217;en est-il de %, VW et VH ? De quoi s&#8217;agit-il ?<\/a><\/li><li class=\"toc-level-1\"><a href=\"#6-m%C3%A1s-sobre-vw-y-vh\">En savoir plus sur VW et VH<\/a><\/li><li class=\"toc-level-1\"><a href=\"#7-%C2%BFcu%C3%A1ndo-deber%C3%ADa-usar-una-unidad-sobre-otra\">Quand dois-je utiliser une unit\u00e9 plut\u00f4t qu&#8217;une autre ?<\/a><\/li><\/ul>\n<h2 class=\"wp-block-heading\" id=\"0-estructura-b%C3%A1sica-de-un-documento-html\">Structure de base d&#8217;un document HTML<\/h2>\n\n<p>Comme l&#8217;a dit Carl Sagan,  <a href=\"https:\/\/www.youtube.com\/watch?v=LTo31PjL05c\" target=\"_blank\" rel=\"noreferrer noopener\">&#8220;Si vous voulez faire <em>une tarte aux pommes \u00e0 partir de rien, vous devez d&#8217;abord inventer l&#8217;univers<\/em>&#8220;.<\/a>Et oui, pour comprendre les unit\u00e9s relatives d&#8217;Elementor, ce qu&#8217;est un \u00e9l\u00e9ment parent ou le conteneur racine, etc., nous devons d&#8217;abord savoir comment une page web est fondamentalement structur\u00e9e en langage HTML.<\/p>\n\n<p>Nous voyons ici la structure minimale d&#8217;un document HTML (Hypertext Markup Language), le langage HTML est compos\u00e9 de balises qui sont d\u00e9limit\u00e9es par les signes inf\u00e9rieurs qui sont utilis\u00e9s dans le document.  <strong>&lt;<\/strong>  et sup\u00e9rieur \u00e0  <strong>&gt;<\/strong>exemple  &lt;html&gt;avec des exceptions telles que la premi\u00e8re \u00e9tiquette  &lt;!DOCTYPE html&gt;  qui est absolue, toutes les balises ont des balises d&#8217;ouverture et de fermeture, par exemple  <strong>&lt;h1&gt;<\/strong>Header<strong>&lt;\/h1<\/strong><strong>&gt;, la fermeture se distingue par le fait que l&#8217;ouverture de la balise comprend<\/strong><strong>\n  <span class=\"has-inline-color has-black-color\">&lt;\/<\/span>\n<\/strong> en plus de la barre oblique &#8220;moins que&#8221; \u00e9galement appel\u00e9e <strong>barre oblique<\/strong> <strong>\/<\/strong>.<\/p>\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML.png?strip=all&quality=92&webp=92&avif=92&w=2560\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML.png?strip=all&quality=92&webp=92&avif=92\" alt=\"Structure minimale d'un document HTML\" class=\"wp-image-16195\" width=\"648\" height=\"379\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 960w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML-300x175.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML-768x449.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 768w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML-400x234.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 400w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=192 192w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=576 576w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=450 450w\" sizes=\"(max-width: 648px) 100vw, 648px\" \/><\/a><\/figure>\n<ol class=\"wp-block-list\"><li>  La premi\u00e8re ligne de l&#8217;exemple est un \u00e9l\u00e9ment absolu (elle n&#8217;a pas de balise de fermeture) ; il s&#8217;agit d&#8217;une balise  <strong>d\u00e9claration de type de document<\/strong>  (\u00e9galement appel\u00e9  <strong>DOCTYPE d\u00e9claration<\/strong>  ) qui identifie ce document comme un document HTML5 et indique aux navigateurs modernes qu&#8217;ils doivent interpr\u00e9ter le document tel qu&#8217;il est \u00e9crit conform\u00e9ment \u00e0 la sp\u00e9cification HTML5.<\/li><li>L&#8217;ensemble du document est contenu dans un document <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><li>Dans le <strong>langage html<\/strong>, le document est divis\u00e9 en une t\u00eate et un corps. L&#8217;<strong>en-t\u00eate<\/strong> contient des informations descriptives sur le document lui-m\u00eame, telles que son titre, les feuilles de style qu&#8217;il utilise, les scripts et d&#8217;autres informations &#8220;m\u00e9ta&#8221;.<\/li><li>Le <strong>body<\/strong> est le corps de la page, c&#8217;est l&#8217;\u00e9l\u00e9ment qui contient tout ce que nous voulons voir appara\u00eetre dans la fen\u00eatre du navigateur.<\/li><li>Les <strong>m\u00e9ta-\u00e9l\u00e9ments<\/strong> contenus dans la balise head fournissent des informations sur le document lui-m\u00eame. Un \u00e9l\u00e9ment m\u00e9ta peut \u00eatre utilis\u00e9 pour fournir toutes sortes d&#8217;informations, mais dans le cas de cet exemple, il sp\u00e9cifie le codage des caract\u00e8res (la collection normalis\u00e9e de lettres, de chiffres et de symboles) utilis\u00e9 dans le document.<\/li><li>Dans l&#8217;en-t\u00eate se trouve \u00e9galement la balise de <strong>titre<\/strong> obligatoire. Selon la sp\u00e9cification HTML, chaque document doit contenir un titre descriptif. C&#8217;est ce titre qui s&#8217;affiche dans l&#8217;onglet du navigateur et que Google affichera dans la liste de recherche comme titre de cette page.<\/li><li>\u00c0 l&#8217;int\u00e9rieur du bloc body, nous pouvons cr\u00e9er autant de sections que nous le souhaitons, la balise <strong>div<\/strong>, cette balise nous permet de regrouper plusieurs \u00e9l\u00e9ments du bloc (paragraphes, titres, listes, etc.). Ces sections sont des conteneurs.<\/li><li>Il s&#8217;agit d&#8217;une autre section comme la pr\u00e9c\u00e9dente.<\/li><\/ol>\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML-2.png?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML-2.png?strip=all&quality=92&webp=92&avif=92\" alt=\"\" class=\"wp-image-16219\" width=\"533\" height=\"439\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML-2.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 960w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML-2-300x247.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML-2-768x632.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 768w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML-2-365x300.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 365w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML-2.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=192 192w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML-2.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=576 576w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Esquema-HTML-2.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=450 450w\" sizes=\"(max-width: 533px) 100vw, 533px\" \/><\/a><\/figure>\n<p>Comme vous pouvez le voir dans la <em>figure<\/em>, toutes ces balises sont des sortes de conteneurs, la balise racine ou principale est la balise <strong>html<\/strong> qui contient toutes les autres, \u00e0 l&#8217;int\u00e9rieur de la <strong>balise html<\/strong> nous avons le <strong>body<\/strong>, et \u00e0 l&#8217;int\u00e9rieur du <strong>body<\/strong> nous avons d&#8217;autres <strong>divs<\/strong>. Nous pouvons donc dire que l&#8217;<strong>\u00e9l\u00e9ment racine<\/strong> est le <strong>html<\/strong>, que le <strong>body<\/strong> est un enfant du <strong>html<\/strong> et que les <strong>divs<\/strong> sont des enfants du <strong>body<\/strong>.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"1-unidades-de-medida-de-elementor\">Unit\u00e9s de mesure d&#8217;Elementor<\/h2>\n\n<p id=\"unidades\">Lors de la conception avec Elementor, vous pouvez voir 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 faut-il utiliser l&#8217;une ou l&#8217;autre ?  <\/p>\n\n<p>Commen\u00e7ons par les bases : en CSS, vous pouvez sp\u00e9cifier la taille ou la longueur des \u00e9l\u00e9ments en utilisant diff\u00e9rentes unit\u00e9s de mesure. Les unit\u00e9s de mesure que vous trouverez dans certaines options des widgets Elementor comprennent <em>PX, EM, REM, %, VW et VH<\/em>, bien qu&#8217;il y en ait plusieurs autres disponibles en CSS. Tous les \u00e9l\u00e9ments Elementor ne proposent pas toutes ces unit\u00e9s. Elementor ne pr\u00e9sente que les options qui ont le plus de sens pour l&#8217;\u00e9l\u00e9ment donn\u00e9.<\/p>\n\n<p>L&#8217;aspect le plus important \u00e0 conna\u00eetre \u00e0 propos des diff\u00e9rentes unit\u00e9s est que certaines unit\u00e9s, comme PX, sont des <strong>unit\u00e9s absolues<\/strong> et d&#8217;autres 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><strong>PX<\/strong>: les pixels (px) sont consid\u00e9r\u00e9s comme des unit\u00e9s absolues, bien qu&#8217;ils soient relatifs au DPI et \u00e0 la r\u00e9solution du dispositif d&#8217;affichage. Mais dans l&#8217;appareil lui-m\u00eame, l&#8217;unit\u00e9 PX est fixe et ne change pas en fonction d&#8217;un autre \u00e9l\u00e9ment. L&#8217;utilisation de PX peut \u00eatre probl\u00e9matique pour les sites web r\u00e9actifs, mais ils sont utiles pour maintenir une taille coh\u00e9rente pour certains \u00e9l\u00e9ments. Si vous avez des \u00e9l\u00e9ments qui ne doivent pas \u00eatre redimensionn\u00e9s, l&#8217;utilisation de 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\"><li><strong>MS<\/strong>: par rapport \u00e0 l&#8217;\u00e9l\u00e9ment parent<\/li><li><strong>REM<\/strong>: relatif \u00e0 l&#8217;\u00e9l\u00e9ment racine (balise HTML et, \u00e0 d\u00e9faut, \u00e0 la taille configur\u00e9e par le navigateur).<\/li><li><strong>%<\/strong>: relatif \u00e0 l&#8217;\u00e9l\u00e9ment parent<\/li><li><strong>VW<\/strong>: par rapport \u00e0 la largeur de la fen\u00eatre graphique<\/li><li><strong>VH<\/strong>: par rapport \u00e0 la hauteur de la fen\u00eatre graphique<\/li><\/ul>\n<p>Contrairement \u00e0 PX, les unit\u00e9s relatives telles que %, EM et REM sont mieux adapt\u00e9es au responsive design et permettent \u00e9galement de <strong>respecter les normes d&#8217;accessibilit\u00e9<\/strong>. Les unit\u00e9s relatives s&#8217;adaptent mieux aux diff\u00e9rents appareils car elles peuvent augmenter ou diminuer en fonction de la taille d&#8217;un autre \u00e9l\u00e9ment.<\/p>\n\n<p>Prenons un exemple simple : dans la plupart des navigateurs, la taille de police par d\u00e9faut est de <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 au moyen d&#8217;une feuille de style CSS, celle-ci devient la base de calcul des unit\u00e9s relatives sur le reste de la page. De m\u00eame, si un utilisateur ajuste la taille de sa police, cela devient la base de calcul des unit\u00e9s relatives.<\/p>\n\n<p>Que signifient donc ces unit\u00e9s par rapport \u00e0 la valeur par d\u00e9faut de 16px ?<\/p>\n\n<p>Le nombre que vous indiquez est multipli\u00e9 par la taille par d\u00e9faut.<\/p>\n\n<p>1em = 16px (1 * 16)<\/p>\n\n<p>2em = 32 px (2 * 16)<\/p>\n\n<p>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>1rem = 16 px<\/p>\n\n<p>2rem = 32px<\/p>\n\n<p>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>100% = 16 px<\/p>\n\n<p>200% = 32 px<\/p>\n\n<p>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>C&#8217;est tr\u00e8s bien, mais que se passe-t-il si l&#8217;utilisateur modifie la taille par d\u00e9faut de son navigateur ? Comme il s&#8217;agit d&#8217;unit\u00e9s relatives, les valeurs finales de la taille seront bas\u00e9es sur la nouvelle taille de base. Bien que la valeur par d\u00e9faut du navigateur soit g\u00e9n\u00e9ralement de 16 px, si l&#8217;utilisateur la modifiait en 14 px, les tailles calcul\u00e9es seraient les suivantes :<\/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>1em = 14px (1 * 14)<\/p>\n\n<p>2em = 28px (2 * 14)<\/p>\n\n<p>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>1rem = 14px<\/p>\n\n<p>2rem = 28px<\/p>\n\n<p>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>100% = 14 px<\/p>\n\n<p>200% = 28 px<\/p>\n\n<p>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>Cela permet \u00e0 l&#8217;utilisateur d&#8217;ajuster la taille de police par d\u00e9faut de son navigateur, tout en conservant l&#8217;\u00e9chelle relative de chaque \u00e9l\u00e9ment qu&#8217;il a 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 la SEP et le REM ?<\/h2>\n\n<p>Le graphique ci-dessus montre que l&#8217;EM et le REM ont exactement la m\u00eame apparence. En quoi diff\u00e8rent-ils ?<\/p>\n\n<p>En bref, ils diff\u00e8rent en fonction de l&#8217;h\u00e9r\u00e9dit\u00e9. Comme indiqu\u00e9, le <strong>REM<\/strong> est bas\u00e9 sur l&#8217;<strong>\u00e9l\u00e9ment racine<\/strong> (HTML) et, par d\u00e9faut, s&#8217;il n&#8217;est pas d\u00e9fini par le navigateur de l&#8217;utilisateur, il est de <strong>16px<\/strong>. Chaque \u00e9l\u00e9ment enfant utilisant <strong>REM<\/strong> utilisera la taille de la racine HTML comme point de calcul, que l&#8217;\u00e9l\u00e9ment parent ait ou non des tailles diff\u00e9rentes sp\u00e9cifi\u00e9es.<\/p>\n\n<p><strong>EM<\/strong>, quant \u00e0 lui, est bas\u00e9 sur la taille de la police de l&#8217;\u00e9l\u00e9ment principal. Si un \u00e9l\u00e9ment parent a une taille diff\u00e9rente de celle de l&#8217;\u00e9l\u00e9ment racine, le calcul de l&#8217;<strong>EM<\/strong> est bas\u00e9 sur l&#8217;\u00e9l\u00e9ment parent et non sur l&#8217;\u00e9l\u00e9ment racine. Cela signifie que les \u00e9l\u00e9ments imbriqu\u00e9s qui utilisent <strong>EM<\/strong> pour le dimensionnement peuvent parfois se retrouver avec une taille que vous n&#8217;aviez pas pr\u00e9vue. D&#8217;autre part, il vous offre un contr\u00f4le plus d\u00e9taill\u00e9 si vous devez sp\u00e9cifier la taille d&#8217;une zone particuli\u00e8re d&#8217;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\">Qu&#8217;en est-il de %, VW et VH ? De quoi s&#8217;agit-il ?<\/h2>\n\n<p>Alors que <strong>PX<\/strong>, <strong>EM<\/strong> et <strong>REM<\/strong> sont principalement utilis\u00e9s pour la taille de la police, <strong>%<\/strong>, <strong>VW<\/strong> et <strong>VH<\/strong> sont principalement utilis\u00e9s pour les marges, le rembourrage, l&#8217;espacement et les largeurs\/hauteurs.<\/p>\n\n<p>Pour rappel, <strong>VH<\/strong> signifie &#8220;viewport height&#8221;, c&#8217;est-\u00e0-dire la hauteur de l&#8217;\u00e9cran visible. <strong>100VH<\/strong> repr\u00e9sente 100 % de la hauteur de la fen\u00eatre ou toute la hauteur de l&#8217;\u00e9cran. Et, bien s\u00fbr, <strong>VW<\/strong> signifie &#8220;viewport width&#8221;, c&#8217;est-\u00e0-dire la largeur de l&#8217;\u00e9cran visible.  <strong>100VW<\/strong> repr\u00e9sente 100 % de la largeur de la fen\u00eatre graphique ou toute la largeur de l&#8217;\u00e9cran.  <strong>%<\/strong> refl\u00e8te un pourcentage de la taille de l&#8217;<strong>\u00e9l\u00e9ment principal<\/strong>, quelle que soit la taille de la fen\u00eatre graphique.<\/p>\n\n<p>Voyons quelques exemples o\u00f9 Elementor propose des options <strong>%<\/strong>, <strong>VW<\/strong> et <strong>VH<\/strong>.<\/p>\n\n<ul class=\"wp-block-list\"><li><strong>Largeur des colonnes<\/strong>: Si vous modifiez la disposition d&#8217;une colonne Elementor, vous remarquerez qu&#8217;il n&#8217;y a qu&#8217;une seule unit\u00e9 de largeur disponible : %. Les largeurs de colonnes ne fonctionnent bien et de mani\u00e8re r\u00e9active que lorsque des pourcentages sont utilis\u00e9s, c&#8217;est pourquoi aucune autre option n&#8217;est propos\u00e9e.<\/li><li><strong>Marges<\/strong>: les marges d&#8217;une section peuvent \u00eatre sp\u00e9cifi\u00e9es en PX ou en %. Il est g\u00e9n\u00e9ralement pr\u00e9f\u00e9rable d&#8217;utiliser % pour s&#8217;assurer que les marges ne sont pas plus grandes que le contenu lorsqu&#8217;elles sont r\u00e9duites pour un appareil mobile, par exemple. En utilisant un pourcentage de la largeur de l&#8217;appareil, vos marges seront maintenues par rapport \u00e0 la taille du contenu, ce qui est presque toujours pr\u00e9f\u00e9rable.<\/li><li><strong>Padding<\/strong>: le padding d&#8217;une section peut \u00eatre sp\u00e9cifi\u00e9 en PX, MS ou %. Comme pour les marges, il est souvent pr\u00e9f\u00e9rable d&#8217;utiliser EM ou % afin que le remplissage reste relatif lorsque la taille de la page augmente.<\/li><li><strong>Taille de la police<\/strong>: si vous modifiez la typographie d&#8217;un \u00e9l\u00e9ment, tel qu&#8217;un titre, quatre options s&#8217;offrent \u00e0 vous : PX, EM, REM et VH.<\/li><\/ul>\n<p>Vous est-il d\u00e9j\u00e0 arriv\u00e9 de cr\u00e9er un grand en-t\u00eate et d&#8217;admirer son aspect sur l&#8217;ordinateur de bureau, avant de vous rendre compte qu&#8217;il \u00e9tait trop grand sur le t\u00e9l\u00e9phone portable ?<\/p>\n\n<p>Pour r\u00e9soudre ce probl\u00e8me de mani\u00e8re \u00e9l\u00e9gante, il convient d&#8217;utiliser EM, REM ou VW au lieu de PX. Le choix d\u00e9pend de votre situation particuli\u00e8re. Je choisis g\u00e9n\u00e9ralement EM parce que je veux que la taille soit relative au parent de l&#8217;en-t\u00eate. Mais si vous pr\u00e9f\u00e9rez que la taille soit relative \u00e0 la taille de la racine (HTML), choisissez plut\u00f4t REM. Vous pouvez \u00e9galement la d\u00e9finir comme \u00e9tant relative \u00e0 la largeur de la fen\u00eatre graphique (VW) si cela vous convient mieux.  <\/p>\n\n<p>Notez que vous pouvez \u00e9galement d\u00e9finir des valeurs PX de taille de police sp\u00e9cifiques \u00e0 l&#8217;appareil en utilisant les ic\u00f4nes de l&#8217;appareil pour sp\u00e9cifier une taille pour l&#8217;ordinateur de bureau, la tablette et l&#8217;appareil mobile. Mais cela impose toujours des limites en mati\u00e8re de r\u00e9activit\u00e9 et d&#8217;accessibilit\u00e9, il faut donc garder cela \u00e0 l&#8217;esprit si vous choisissez PX.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"6-m%C3%A1s-sobre-vw-y-vh\">En savoir plus sur VW et VH<\/h2>\n\n<p>Les unit\u00e9s de la fen\u00eatre de visualisation repr\u00e9sentent un pourcentage de la fen\u00eatre de visualisation actuelle du navigateur (taille actuelle du navigateur). Bien qu&#8217;elles soient similaires aux unit\u00e9s de pourcentage, il existe une diff\u00e9rence. Les unit\u00e9s de la fen\u00eatre de visualisation sont calcul\u00e9es en pourcentage de la taille actuelle de la fen\u00eatre de visualisation du navigateur. Les unit\u00e9s de pourcentage, quant \u00e0 elles, sont calcul\u00e9es comme un pourcentage de l&#8217;<strong>\u00e9l\u00e9ment principal<\/strong>, qui peut \u00eatre diff\u00e9rent de la taille de la fen\u00eatre graphique.<\/p>\n\n<p>Prenons l&#8217;exemple d&#8217;une fen\u00eatre d&#8217;affichage sur \u00e9cran mobile de 480 px x 800 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>1 VW = 1% de la largeur de la fen\u00eatre graphique (ou 4,8 px)<\/p>\n\n<p>50 VW = 50% de la largeur de la fen\u00eatre graphique (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>1 VH = 1% de la hauteur de la fen\u00eatre graphique (ou 8px)<\/p>\n\n<p>50 VH = 50% de la hauteur de la fen\u00eatre graphique (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>Si la taille de la fen\u00eatre graphique change, la taille de l&#8217;\u00e9l\u00e9ment change \u00e9galement.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"7-%C2%BFcu%C3%A1ndo-deber%C3%ADa-usar-una-unidad-sobre-otra\">Quand dois-je utiliser une unit\u00e9 plut\u00f4t qu&#8217;une autre ?<\/h2>\n\n<p>En fin de compte, il n&#8217;y a pas de r\u00e9ponse parfaite \u00e0 cette question. En g\u00e9n\u00e9ral, il est souvent pr\u00e9f\u00e9rable de choisir l&#8217;une des unit\u00e9s relatives plut\u00f4t que PX afin que votre site web ait les meilleures chances de repr\u00e9senter un design r\u00e9actif. En revanche, choisissez <strong>PX<\/strong> si vous voulez vous assurer qu&#8217;un \u00e9l\u00e9ment ne change jamais de taille \u00e0 un point de rupture et qu&#8217;il reste identique, que l&#8217;utilisateur ait ou non choisi une taille par d\u00e9faut diff\u00e9rente. Les unit\u00e9s PX garantissent des r\u00e9sultats constants, m\u00eame si ce n&#8217;est pas l&#8217;id\u00e9al.<\/p>\n\n<ul class=\"wp-block-list\"><li><strong>EM<\/strong> est relatif \u00e0 la taille de la police de l&#8217;\u00e9l\u00e9ment parent, donc si vous voulez changer la taille de l&#8217;\u00e9l\u00e9ment en fonction de la taille de son parent, utilisez EM.<\/li><li><strong>REM<\/strong>  est relative \u00e0 la taille de la police racine (HTML) et si elle n&#8217;est pas d\u00e9finie, c&#8217;est la taille de la police du navigateur qui sera utilis\u00e9e. Par cons\u00e9quent, si vous souhaitez adapter la taille de l&#8217;\u00e9l\u00e9ment en fonction de la taille de la racine, quelle que soit la taille principale, utilisez REM. Si vous avez utilis\u00e9 EM et que vous rencontrez des probl\u00e8mes de taille dus \u00e0 de nombreux \u00e9l\u00e9ments imbriqu\u00e9s, REM est probablement la meilleure option.<\/li><li><strong>VW<\/strong> est utile pour cr\u00e9er des \u00e9l\u00e9ments de pleine largeur (100 %) qui remplissent toute la largeur de la fen\u00eatre graphique. Bien entendu, vous pouvez utiliser n&#8217;importe quel pourcentage de la largeur de la fen\u00eatre graphique pour atteindre d&#8217;autres objectifs, comme 50 % pour la moiti\u00e9 de la largeur, etc.<\/li><li><strong>VH<\/strong> est utile pour cr\u00e9er des \u00e9l\u00e9ments de pleine hauteur (100 %) qui remplissent toute la hauteur de la fen\u00eatre de visualisation. Bien entendu, vous pouvez utiliser n&#8217;importe quel pourcentage de la hauteur de la fen\u00eatre graphique pour atteindre d&#8217;autres objectifs, par exemple 50 % pour la moiti\u00e9 de la hauteur, etc.<\/li><li><strong>%<\/strong> est similaire \u00e0 VW et VH, mais n&#8217;est pas une longueur relative \u00e0 la largeur ou \u00e0 la hauteur de la fen\u00eatre graphique. Il s&#8217;agit plut\u00f4t d&#8217;un pourcentage de la largeur ou de la hauteur de l&#8217;\u00e9l\u00e9ment parent. Les unit\u00e9s de pourcentage sont souvent utiles pour d\u00e9finir la largeur des marges, par exemple.<\/li><li>Elementor permet de choisir facilement l&#8217;option qui convient le mieux \u00e0 votre design. En fin de compte, c&#8217;est votre choix.<\/li><\/ul>","protected":false},"featured_media":30784,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-40996","elementor-adedemy","type-elementor-adedemy","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Cual-es-la-diferencia-entre-PX-EM-REM-VW-y-VH-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,false],"thumbnail":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Cual-es-la-diferencia-entre-PX-EM-REM-VW-y-VH-elementor-150x150.jpg?strip=all&quality=92&webp=92&avif=92",150,150,true],"medium":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Cual-es-la-diferencia-entre-PX-EM-REM-VW-y-VH-elementor-300x150.jpg?strip=all&quality=92&webp=92&avif=92",300,150,true],"medium_large":["https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2021\/07\/Cual-es-la-diferencia-entre-PX-EM-REM-VW-y-VH-elementor-768x383.jpg",768,383,true],"large":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Cual-es-la-diferencia-entre-PX-EM-REM-VW-y-VH-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true],"1536x1536":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Cual-es-la-diferencia-entre-PX-EM-REM-VW-y-VH-elementor-1536x766.jpg?strip=all&quality=92&webp=92&avif=92",1536,766,true],"2048x2048":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/07\/Cual-es-la-diferencia-entre-PX-EM-REM-VW-y-VH-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true]},"uagb_author_info":{"display_name":"La Colmena Tecnol\u00f3gica","author_link":"https:\/\/lacolmenatecnologica.com\/fr\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"Structure de base d&#8217;un document HTML Comme l&#8217;a dit Carl Sagan, &#8220;Si vous voulez faire une tarte aux pommes \u00e0 partir de rien, vous devez d&#8217;abord inventer l&#8217;univers&#8220;.Et oui, pour comprendre les unit\u00e9s relatives d&#8217;Elementor, ce qu&#8217;est un \u00e9l\u00e9ment parent ou le conteneur racine, etc., nous devons d&#8217;abord savoir comment une page web est fondamentalement&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy\/40996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/30784"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=40996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}