Concevoir un site réactif avec un dimensionnement basé sur EM

Sep 15, 2025

Comment

Vous avez probablement entendu dire que vous devriez utiliser des unités relatives pour la taille de la police. C'est une bonne règle pour la conception Web accessible; Si l'utilisateur modifie la taille de la police par défaut de la navigation, cela permet de redimensionner le texte de votre page de redimensionner en conséquence. Vous avez peut-être suivi ce conseil et a fait le commutateur. Peut-être avez-vous sorti votre calculatrice et convertit la taille de la police de votre site de l'absolu px unités à EMS ou, plus susceptibles, REMS.

Mais si c'est là que vous vous êtes arrêté, vous manquez de nombreuses flexibilité et puissance que EMS apportez au navigateur. L'unité EM n'est pas simplement un remplaçant pour le familier px ; Vous pouvez l'utiliser pour plus de propriétés que de taille de police . Si vous le faites, certains de ses autres avantages commencent à émerger.

En utilisant systématiquement en utilisant EMS, vous pouvez concevoir des composants sur la page qui répondent automatiquement si la taille de la police change. Ensuite, avec une astuce intelligente pour une taille de police réactive, vous pouvez produire une page entière qui s'ajuste de manière dynamique sur la base de la largeur de la fenêtre du navigateur. Permettez-moi de vous montrer comment tirer parti du comportement «relatif» d'EMS pour créer des conceptions évolutives et réactives.

Unités de taille de police

Utiliser EMS pour la taille de la police peut être délicat. La valeur exacte est déterminée par la taille de police héritée de l'élément (c'est-à-dire la taille de la police de l'élément parent). Cela se complique lorsque vous commencez à imager des éléments plus profondément. Si un élément a une taille de police dans EMS, son parent a une taille de police dans EMS et son parent en a une autre. Vous devrez multiplier toutes ces valeurs pour déterminer la valeur calculée réelle de l'élément enfant.

Cela signifie que placer le même module dans différents conteneurs pourrait changer la signification de l'EM. Le module sera imprévisible.

Pour éviter cela, nous utilisons généralement une unité relative différente de la taille de la police: REMS. Un REM (ou «racine EM») est basé sur la taille de la police héritée, mais sur la taille de la police de l'élément racine de la page, & lt; html & gt; . Cela signifie que sa valeur est la même dans toute la page. Il est plus prévisible que, et souvent préférable à des SMS réguliers.

Construire un module avec EMS

Utilisons des unités relatives pour construire un module. Cependant, nous ne suivons pas l'approche commune. Au lieu d'utiliser REM pour tout, nous ne l'utiliserons qu'une seule fois: sur l'élément le plus haut du module. Cela établira une taille de police connue du module, plutôt que sur la base d'une chaîne imprévisible de valeurs EM au-dessus de celle-ci dans le DOM. Cela signifie que nous pouvons facilement réduire la taille du module en remplaçant une valeur unique.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Utilisez REMS sur l'élément ultérieur pour établir une taille de la police connue, puis utilisez EMS pour construire en fonction de cette valeur.

Après avoir établi cette taille de la police connue, nous sommes en sécurité pour utiliser des SMS réguliers tout au long du module. Utilisez-le non seulement pour toutes tailles de police sur les sous-éléments, mais aussi pour la plupart des autres propriétés, y compris rembourrage , marge et rayon de frontière .

Nous allons construire un panneau avec une rubrique et un corps. Le balisage ressemble à ceci:

 & lt; div class = "panneau" & gt;
  & lt; div class = "bande de panneau" & gt;
    & lt; h3 & gt; voici la puissance de EMS & LT; / h3 & gt;
  & lt; / div et gt;
  & lt; div la classe = "panneau-corps" & gt;
    Considérer les moyens de tirer parti de la relative
    Unités de dimensionnement dynamique de vos modules.
  & lt; / div et gt;
& lt; / div et gt;

Style du conteneur extérieur. Nous allons définir la taille de la police à 1rem établir notre valeur EM locale. Nous définirons ensuite le rayon de frontière utiliser EMS. J'aime généralement utiliser PX pour la frontière, cependant, pour obtenir une belle ligne fine.

 .Panel {
  Taille de la police: 1rem;
  frontière: 1px solide # 678;
  frontière-rayon: 0.3em;
  débordement caché;
}

Ensuite, stysez les éléments internes. Nous utiliserons des EMS pour le rembourrage. Ensuite, nous augmenterons la taille de la police de la route à 1,25 fois notre valeur EM locale, produisant une taille calculée de 20 px.

 .Panel-heading {
  PADING: 0.6EM 1.2EM;
  Couleur de fond: #cde;
  frontière-fond: 1px solide # 678;
}
.Panel-heading & gt; h3 {
  Taille de la police: 1.25EM;
  marge: 0;
  Espacement des lettres: 0.03ème;
}
.panel-corde {
  PADING: 0.6EM 1.2EM;
}

Vous pouvez multiplier les valeurs de rembourrage par sa taille de police pour déterminer leurs valeurs calculées (9.6px vertical et 19.2px horizontal). Bienheureusement, cependant, peu importe. Essayez de ne pas vous embourber avec des mesures pixelles-parfaites. Cela peut se sentir maladroit, mais appuyer sur. Plus vous utilisez EMS, plus vous allez les connaître comme une unité à leur propre respect.

Échec de la conception de manière dynamique

Lorsque nous créons des modules réutilisables comme celui-ci, nous trouvons souvent que nous avons besoin de quelques variations. Disons que nous voulions créer une version plus grande. Si nous utilisions PX pour tout, cela signifie augmenter la taille de la police, le rembourrage, le rayon frontalier, etc. Cependant, parce que nous avons tout défini par rapport à une taille de police basée sur REM, nous n'avons besoin que de modifier cette valeur et que tout le module répondra:

 .Panel - Grande {la taille de la police: 1.2rem; }

Nous ajoutons simplement cette classe à un panneau pour le rendre plus grand: & lt; div class = "panneau de panneau - grand" & gt; . Cela changera la définition locale d'un EM, et donc le rayon de frontière et le changement de rembourrage également, ainsi que la taille de la police de ses éléments d'enfant. Avec une seule déclaration, nous avons redimensionné chaque partie du module.

A panel module, with paddings and border radius defined using ems — Un module de panneau, avec des pavages et un rayon de frontière défini à l'aide de EMS

De même, nous pourrions créer une petite version:

 .Panel - petite {la taille de la police: 0.8rem; }

En mettant la base du module à l'aide d'une taille de police de niveau supérieur dans les REM, nous l'avons rendue stable et prévisible. En définissant tout le reste à l'aide de EMS, nous avons réalisé toutes ses pièces composantes évolutives.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Il est possible de fonder la taille de tout à l'intérieur du module sur une seule valeur, puis modifiez cette valeur pour l'échelle tout

Ceci est un motif puissant. Vous pouvez utiliser cette approche pour n'importe quoi sur votre page, des menus déroulants aux boutons Social Media. Rouez le module avec une valeur REM, puis utilisez-les pour pratiquement tout le reste des pavages au positionnement des tailles d'icônes.

Le rendre réactif

Poussons le principe un niveau plus loin. Nous avons dimensionné le module (et théoriquement tous les autres modules de la page) à l'aide de REM et EMS. Cela signifie finalement que leur taille est basée sur la taille de la police de l'élément racine. Ensuite, nous pouvons ajuster cette valeur unique pour que la page complète réponde à son tour.

Apportons dans une autre unité relative: vh . La valeur calculée de cette unité est dérivée de la taille de l'écran de l'utilisateur; Il est égal à 1% de la largeur de la fenêtre. Si nous utilisons l'unité VH pour définir la taille de la police racine, elle s'ajoutera automatiquement de manière réactive, Sans Medies requêtes. Définissez la taille de la police sur la racine à 2vw :

 HTML {
  Taille de la police: 2VW;
}

Malheureusement, l'effet est un peu trop fort. Sur un iPhone 6, par exemple, cela calculera à 5,5 px, ce qui est trop petit. De même, c'est déraisonnablement grand sur des écrans plus gros. Pour adoucir l'effet, nous pouvons utiliser les CSS Calc () fonction:

 HTML {
  Taille de la police: CALC (0.6EM + 1VW);
}

Maintenant, la taille de la police est dérivée en partie d'une valeur stable et partiellement d'une réponse réactive. Cela produit un bien meilleur effet. Le 0.6ème se comporte comme une sorte de taille de police minimale. Maintenant, la racine EM échoue à l'échelle fluide d'environ 13px sur smartphone à 21PX sur un écran de bureau moyen.

Avec votre page composée de modules évolutifs, chacun fondé sur la valeur REM, et ils vont également s'adaptera à la fenêtre. La page est structurée avec une hiérarchie de trois niveaux; Vous pouvez modifier la taille de la page entière, un module individuel ou un seul élément en faisant une édition simple à la taille de la police. Faites confiance aux EMS et REM et le navigateur prendra soin du travail pour vous.

Vous devrez peut-être encore ajouter la requête de média occasionnelle pour contrôler l'emballage de ligne et d'autres préoccupations réactives. Mais ce petit morceau de code associé à une habitude d'utiliser EMS et Rems vous obtiendra beaucoup de la manière.

Cet article a été initialement présenté dans magazine net numéro 288; Achetez-le ici

Articles Liés:

10 astuces de typographie Chaque concepteur devrait savoir
Guide d'un designer pour la typographie et les polices
Maître typographie web accessible

Concevoir un site réactif avec un dimensionnement basé sur EM

Unités de taille de police

Construire un module avec EMS

Échec de la conception de manière dynamique

Le rendre réactif

Comment - Most Popular Articles

8 Incroyable de nouveaux tutoriels de conception graphique

Comment redimensionner une image dans Photoshop

Construire un chatbot à moteur AI

Comment structurer les requêtes de média en SASS

19 conseils pour l'art grand poseur

Créer des visuels 3D interactifs avec trois.js

Comment construire des sites Web plus rapides

Créer des messages parfaits dans tous les clients de messagerie

Catégories