web-dev-qa-db-fra.com

CSS - Quelle est la meilleure solution à utiliser dans ce cas (px,%, vw, wh ou em)?

J'utilise Ionic2 pour le développement d'une application, je suis dans une étape où je dois prévisualiser l'application dans différentes tailles. Actuellement, j'utilise vw dans toutes les tailles, taille de police, remplissage, etc ... mais lorsque le redimensionnement de la police devient parfois un peu petit et même parfois le texte a tendance à ne pas être lisible; pour cela, je voudrais savoir quelle est la meilleure à utiliser dans ce cas soit (px,%, vw, wh ou em).

Ou dois-je utiliser également @ media et prendre en charge différentes tailles de police?

Des pensées?

htmlcssionic2
9
Hamza L.

Notez que je n'ai mentionné que celles que vous avez posées.

Ici vous pouvez voir la liste complète des unités de mesure CSS: nités CSS dans W3Schools

Plutôt que de vous dire lequel est le "bon", je préférerais que vous compreniez ce que chacun est réellement.

Pixels (px): Pixels absolus. Ainsi, par exemple, 20px sera littéralement de 20 pixels sur n'importe quel écran. Si un moniteur mesure 1 980 x 1 200 et que vous définissez la hauteur d'un élément sur 200px, l'élément en prendra 200 pixels.

Pourcentage (%): Par rapport à la valeur parent.

Donc, pour cet exemple:

<div style="width: 200px;">
    <div style="width: 50%;"></div>
</div>

Le div intérieur aura une largeur de 100 pixels.

Hauteur/largeur de la fenêtre d'affichage (vw/vh): Taille relative à la fenêtre d'affichage (fenêtre du navigateur, essentiellement).

Exemple:

.myDiv {
    width: 100vw;
    height: 100vh;
    background-color: red;
}

Fera une couverture de l'ensemble du navigateur en rouge. C'est très courant parmi flexbox car il est naturellement réactif.

Emeters (em) et Root Emeters (rem): em est relatif au parent taille de police de l'élément. rem sera relative à la taille de police html (principalement 16 pixels). C'est très utile si vous voulez garder une "relativité des tailles à l'esprit" sur votre projet, et ne pas utiliser de variables par des pré-processeurs comme Sass et Less. Je suppose que c'est plus simple et plus intuitif.

Exemple:

.myDiv {
    font-size: 0.5rem;
}

La taille de la police sera de 8 pixels.

Maintenant que vous savez, choisissez celui qui vous convient.

18
Ariel Weinberger

w3schools.com a un joli joli résumé sur les unités CSS.

Pour ma part, j'utilise toujours em . Pourquoi?

Tout d'abord, em est relatif à votre font-size. Comme le dit w3school, 2em serait 2 fois du font-size vous avez défini dans votre conteneur parent . Vous pouvez donc définir un font-size pour votre balise html et utilisez ce que vous voulez, pour gérer la relative font-sizes pour diverses tâches.

De plus, em est couvert dans la plupart des navigateurs.

Au moins, vous pouvez utiliser @media-queries pour gérer réactif font-size gestion des appareils mobiles. Vous pouvez donc envisager d'utiliser @media-queries combiné avec un parent font-size en utilisant em .

1
Aer0

cela va probablement être fermé, mais j'aime utiliser les unités em car elles sont très évolutives, en particulier dans les navigateurs mobiles, cela étant dit, j'utilise des requêtes multimédias avec elles. Je dépend vraiment de ce que tu fais.

Un bon site se composera probablement de quelques ems et de quelques pixels, donc quel que soit votre objectif final, il devra dicter celui que vous utiliserez,

si vous comprenez chaque application, vous pourrez vous retrouver avec celle que vous préférez. W3Schools et W3code ont tous deux de bons articles sur eux ...

0
Dion Matthew Levy