web-dev-qa-db-fra.com

Pourquoi Bootstrap 4 choisissez rem et em à la place px?

Je voudrais savoir pourquoi Boostrap choisissez rem et em à la place px pour la nouvelle version de Boostrap 4.

On peut voir ici

Quelques exemples de variables:

    $font-size-h1: 2.5rem !default;
    $font-size-h2: 2rem !default;
    $font-size-h3: 1.75rem !default;
    $mark-padding: .2em !default;

C'est une bonne pratique d'utiliser em et rem pour:

  margin: 0;
  padding: 0;
  bottom: 0px;
  width: 100%;

Je suis simplement curieux de savoir que je n'ai pas pu trouver sur le Web à ce sujet, c'est pourquoi je demande.

htmlcsstwitter-bootstrapsassem
24
raduken

Les REM sont utiles presque partout où la taille est explicitement définie.

Avec rem, toutes les tailles de police sont relatives à l'élément racine (aka, la balise html). La raison en est de faciliter la mise à l'échelle vers le haut ou vers le bas pour les appareils. Vous pouvez techniquement changer la balise html en une taille plus petite ou plus grande pour mettre à l'échelle toutes les tailles de police de manière égale - ce qui est une fonctionnalité super sympa.

... [L] a principale chose à emporter est que tout est dynamique et relatif à la balise HTML racine.

Par exemple, changez la taille de police html css en un nombre différent ... et observez comment la grille entière s'ajuste et évolue.

Source: Scotch.io

25
isherwood

Il convient de mentionner que Bootstrap 4 points d'arrêt conservés dans px et non em. À partir du docs :

Alors que Bootstrap utilise ems ou rems pour définir la plupart des tailles, les pxs sont utilisés pour les points d'arrêt de la grille et les largeurs de conteneur. En effet, la largeur de la fenêtre d'affichage est en pixels et ne change pas avec la taille de la police.

12
Kostas Siabanis