Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Pourquoi vous devriez utiliser des mises en page basées sur le Rem

by
Difficulty:BeginnerLength:ShortLanguages:

French (Français) translation by Isaac Asante (you can also view the original English article)

L'unité rem est utilisée pour définir des polices en termes relatifs plutôt que d'une taille absolue en pixels.  Mais saviez-vous que cette unité est utile pour les mises en page et la typographie ?

Dans ce tutoriel vidéo venant de mon cours appelé CSS Layout, vous apprendrez pourquoi il y a un énorme avantage dans l’utilisation de l’unité rem pour les mises en page.

Les avantages des mises en page basées sur le rem

Dans la leçon CSS Layout, la réalisation de notre mise en page se fait à l’aide de l’unité rem.  Comme nous l’avions montré avec plus de détails dans notre cours de typographie, l’unité rem est un multiple de la taille de police initial de votre page.

Le rem est utile non seulement en typographie, mais aussi pour votre mise en page, et je vais vous montrer pourquoi vous devriez utiliser le rem lorsque vous préparez votre mise en page.

Commençons d’abord par regarder la page d’essai sur laquelle nous travaillons :

CSS layout

Si je modifie donc la taille de police dans le navigateur, vous apercevez que la taille de police augmente sur la page :

Font size increased

Si je continue alors d’augmenter la taille de police et que j’actualise la page, vous pouvez voir que la mise en page entière s'est adaptée pour tenir compte de la taille de police agrandie.

Layout adapted for large text

Tout est toujours lisible, et c'est possible car en utilisant le rem pour créer notre mise en page, nous nous assurons que tout est flexible en fonction de la taille de police initial de notre document, qui provient des paramètres du navigateur.

Si je diminue également la taille de police à une très petite taille et que j’actualise encore une fois, vous voyez que la mise en page entière a rétréci.

Layout with small text

Ainsi, en utilisant le rem, nous nous assurons que lorsqu'un utilisateur modifie la taille de police, non seulement le texte lui-même change, mais aussi l'ensemble de la mise en page.

Regardez le cours en entier

Dans le cours en entier, Start Here: Learn CSS Layout, vous mettrez en pratique ce que vous avez appris dans cette vidéo en créant une variété de mises en page à l'aide de l’unité rem.  Vous apprendrez tout ce que vous devez savoir pour créer les types de mises en page les plus courantes en webdesign.  Nous maitriserons le dimensionnement, l'alignement, l'espacement et les bonnes pratiques du responsive CSS.

Si vous venez juste de commencer et souhaitez maîtriser CSS, jetez un œil a Learn CSS: The Complete Guide.

Ou bien vous pouvez gagner encore plus d’expérience à travers plusieurs autres cours de notre série « Start Here » pour les débutants en webdesign.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.