Convertir vw en px Viewport width ↔ Pixels Gratuit En ligne Sûr
Saisissez une valeur en vw et lisez-la aussitôt en px. Le calcul se fait dans votre navigateur, rien n'est envoyé nulle part, et ce dont dépend le résultat est écrit plus bas plutôt que supposé.
Rien n'est envoyé
Tailles courantes — Convertir vw en px
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
D'où viennent ces unités
Le pixel de CSS n'est pas le pixel de votre écran. Quand les affichages ont cessé d'avoir une densité prévisible, une page mesurée en vrais pixels est devenue une page qui rapetissait à mesure que les écrans s'affinaient ; on a donc redéfini le pixel CSS comme une longueur de référence : environ 1/96 de pouce, vu à une distance de lecture confortable. Tout le reste de cette page repose là-dessus. L'em est plus vieux que le web — en typographie plomb, c'était la largeur d'un bloc fondu, nommé d'après le M capital — et il signifie en CSS la taille de police en vigueur, raison pour laquelle il change quand on imbrique les éléments. Le rem fut ajouté pour y échapper : c'est l'em de l'élément racine, et il ne se compose jamais. Le vw est venu avec le responsive : un centième de la largeur de la fenêtre, quelle qu'elle soit.
Où vous les rencontrez
Ce sont les unités de toute feuille de style. Les pixels dimensionnent bordures, ombres et tout ce qui ne doit pas s'échelonner ; le rem dimensionne la typographie, les espacements et la mise en page, de sorte qu'un seul changement à la racine redimensionne une interface entière ; l'em dimensionne ce qui doit suivre son propre texte, comme le remplissage d'un bouton ; le vw dimensionne les titres et les bandeaux qui doivent remplir l'écran sur n'importe quel appareil. Convertir entre eux, c'est l'arithmétique quotidienne qui transforme une maquette livrée en pixels en une feuille de style qui s'adapte.
Questions fréquentes
Pourquoi 16 px comme point de départ habituel ?
Parce que c'est la taille de texte par défaut dans tous les grands navigateurs, et qu'une feuille de style qui ne la redéfinit pas en hérite. Un rem vaut donc 16 px au réglage par défaut : de là viennent les conversions familières, 0,5 rem pour 8 px, 1,5 rem pour 24 px. Si un utilisateur a agrandi la valeur par défaut dans ses réglages, ces mêmes valeurs en rem grandissent avec elle — ce qui est précisément l'intérêt de les employer.
Faut-il employer rem ou em ?
Rem pour tout ce qui doit suivre la page entière — échelle typographique, espacements, largeurs de mise en page —, car il se mesure depuis la racine et ne s'accumule jamais. Em pour tout ce qui doit suivre le texte où il se trouve : le remplissage d'un bouton, l'écart auprès d'une icône, le retrait d'une citation. L'erreur courante est d'imbriquer des éléments dimensionnés en em : 1,2 em dans 1,2 em devient 1,44, puis 1,73, jusqu'à ce que le texte du bas de page fasse le double de la taille voulue.
Le résultat est-il exact ?
Là où les deux unités se définissent l'une par l'autre en nombres entiers, oui — la page le dit au-dessus du chiffre, et le seul arrondi porte sur le nombre de décimales affichées. Là où le rapport n'a pas de décimale finie, la page affiche douze chiffres significatifs et qualifie la relation d'approchée plutôt que de prétendre le contraire.
Ce que je saisis quitte-t-il mon appareil ?
Non. Le calcul se fait dans votre navigateur ; rien n'est envoyé, et il n'y a d'ailleurs aucun serveur pour le recevoir. Une fois la page chargée, elle fonctionne réseau coupé.
Pourquoi on convertit des vw en px
Une feuille de style dit font-size: 5.2vw pour un titre principal, margin-top: 8vw pour une section et width: 42vw pour une image. Ce sont des valeurs souples, et elles ne vous disent pas ce qui se trouve à l'écran. Quelle est la taille du titre sur un téléphone ? Quelle est la largeur de l'image sur un portable ? La marge a-t-elle l'air juste à 1920 pixels ? Pour le savoir, vous convertissez des vw en px : vous multipliez le nombre par la largeur de la fenêtre, vous divisez par cent et vous lisez la réponse dans l'unité qu'emploient les graphistes, les testeurs et les clients. C'est ce que vous faites quand vous relisez du code fluide, vérifiez une version construite par rapport à une maquette ou expliquez à un collègue pourquoi le titre paraît petit sur un écran étroit.
Ce qui distingue cette conversion de celle du rem ou de l'em, c'est que le multiplicateur est la fenêtre elle-même. Un vw est un centième de la largeur de la fenêtre d'affichage ; 5,2vw font donc 52 px dans une fenêtre de 1000 px de large, 18,7 px sur un téléphone de 360 px de large et 99,8 px sur un grand moniteur de 1920. Il n'y a pas de valeur par défaut sur laquelle se rabattre, et la largeur change quand le lecteur tourne le téléphone ou tire sur la fenêtre. Le convertisseur demande donc la largeur, l'affiche à côté de la réponse et commence à 1440 px, une largeur à laquelle on dessine souvent les maquettes.
Le calcul se fait dans votre navigateur, et rien n'est envoyé. Vous trouverez plus bas la formule, ce que la conversion conserve et ne peut pas conserver, comment lire une feuille de style fluide à plusieurs largeurs, le piège de la barre de défilement, le problème d'accessibilité du texte en vw pur et quelques habitudes qui gardent le code fluide compréhensible.
La formule et la largeur
px égale vw multiplié par la largeur, divisé par cent
La formule est px = vw × largeur ÷ 100. À une largeur de 1440 px, 10 vw deviennent 144 px, 5 vw deviennent 72 px et 1,667 vw devient 24 px. La page imprime la largeur à côté du résultat ; une ligne comme 10 vw = 144 px (1440 px) vous dit donc ce qui a été supposé. Pour voir un autre écran, changez la largeur et relisez le résultat.
Quelles largeurs essayer
Un jeu utile à vérifier est 360 ou 390 pour les téléphones, 768 pour une tablette en portrait, 1024 pour un petit portable, 1440 pour un portable ou un poste de bureau typique et 1920 pour un moniteur full HD. Saisissez chacune dans le champ de largeur et notez le résultat. Cinq lectures vous montrent toute l'étendue d'une valeur, et tout extrême saute aux yeux.
Utiliser la largeur de la fenêtre réelle
Dans les outils de développement de votre navigateur, la barre des appareils affiche la largeur de la fenêtre en pixels. Utilisez ce nombre pour comparer ce que fait la page avec ce que dit le convertisseur. S'ils concordent, votre lecture de la feuille de style est juste.
Ce que la conversion conserve et ce qu'elle ne peut pas
Elle conserve la part de l'écran
Un vw est un centième de la largeur de la fenêtre d'affichage ; une taille écrite en vw grandit donc et rétrécit avec la fenêtre au lieu de rester fixe. La valeur en pixels que vous obtenez est cette part rendue concrète pour une largeur particulière.
Elle ne peut pas donner de valeur par défaut
Contrairement au rem, le vw n'a pas de valeur par défaut. Un navigateur donne 16 px à la taille de police de la racine quand personne ne dit le contraire ; une page en rem peut donc partir d'un vrai nombre ; la largeur de la fenêtre d'affichage est simplement la largeur de la fenêtre du lecteur, et elle change quand il tourne le téléphone. Les 1440 px ici sont une largeur à laquelle on dessine souvent les maquettes, une habitude et non une norme. Saisissez la vôtre.
Arrondi
Multiplier par la largeur et diviser par 100 peut produire des décimales. 6,67 vw à 1440 px font 96,048 px. Les navigateurs gèrent les pixels fractionnaires, mais si vous avez besoin d'un nombre entier pour un fichier de conception, arrondissez et notez que l'arrondi est de vous.
Lire une feuille de style fluide
Prenez trois largeurs et écrivez les résultats
Choisissez une largeur étroite, une moyenne et une large, par exemple 375, 1024 et 1920. Pour chaque valeur importante en vw de la feuille de style, convertissez les vw en px à chaque largeur et écrivez les trois nombres dans une note. Un titre de 5,2 vw donne 19,5, 53,2 et 99,8 pixels. Vu ainsi, vous savez si le titre est lisible à l'extrémité étroite et pas écrasant à l'extrémité large.
Cherchez clamp
Un code fluide bien écrit place des limites autour du vw avec clamp(min, préféré, max). Si vous voyez clamp(2rem, 1rem + 4vw, 6rem), la taille grandit entre 32 et 96 px et se maintient aux deux extrémités. Quand vous convertissez la partie en vw, souvenez-vous qu'elle n'est que le milieu de la plage, et que les limites décident de ce qui se passe aux bords.
Vérifiez les extrêmes
Les largeurs risquées sont la plus petite et la plus grande. À 320 px, un titre de 6 vw fait 19 px ; à 2560, il fait 154 px. Si ni l'un ni l'autre n'est acceptable et qu'il n'y a pas de clamp, la feuille de style a besoin de limites.
Pièges quand vous convertissez des vw en px
La barre de défilement
Dans les navigateurs de bureau, la largeur de la fenêtre d'affichage utilisée pour le vw inclut la largeur de la barre de défilement verticale. Ainsi 100vw est un peu plus large que la zone visible quand la page défile, d'environ 15 à 17 pixels sur de nombreux systèmes. La valeur en pixels que vous calculez est donc légèrement plus grande que la largeur visible qu'elle semble représenter. Sur les téléphones, où les barres de défilement se superposent à la page, l'effet est absent.
Utiliser la mauvaise largeur
Le résultat n'est juste que si la largeur saisie l'est. Si votre fenêtre de test fait 1366 px de large et que vous convertissez à 1440, chaque valeur est décalée d'environ cinq pour cent. Lisez la vraie largeur dans les outils de développement.
Confondre le vw et le pourcentage
Une largeur de 50 % renvoie à la largeur du parent, tandis que 50vw renvoie à la fenêtre. Dans un conteneur étroit, les deux sont très différents. Le convertisseur donne la réponse en vw ; si votre élément se trouve dans un conteneur, le parent peut être plus étroit que la fenêtre.
Oublier que le texte en vw ne peut pas être zoomé
Un texte dimensionné seulement en vw ne réagit pas quand le lecteur zoome sur la page, car la fenêtre et le texte évoluent ensemble. Les directives d'accessibilité demandent que le texte puisse être redimensionné. Ajoutez un terme en rem, comme dans clamp(), pour que le texte réagisse aussi au zoom.
Questions que l'on se pose avant de convertir
Combien de pixels font 1 vw ?
Un centième de la largeur de la fenêtre : 14,4 px à 1440, 10 px à 1000, 3,6 px à 360.
Combien de pixels font 50 vw ?
La moitié de la fenêtre : 720 px à 1440 de large, 500 px à 1000 de large.
Pourquoi ma page est-elle plus large que l'écran ?
Une boîte de 100vw sur une page qui défile est plus large que la zone visible parce que la barre de défilement est comptée. Utilisez plutôt 100 % à l'intérieur d'un conteneur.
Le vw est-il identique au pourcentage ?
Non. Le pourcentage renvoie au parent, le vw à la fenêtre.
Mon nombre est-il envoyé ?
Non. L'arithmétique s'exécute dans votre navigateur et rien n'est envoyé nulle part.
Comment revenir en arrière ?
Avec Convertir px en vw, qui divise par la largeur au lieu de multiplier.
Valeurs courantes à des largeurs courantes
Une table mentale
Il est utile de connaître quelques repères pour pouvoir estimer avant d'utiliser le convertisseur. À une largeur de 1000 px, 1 vw fait 10 px, ce qui rend l'arithmétique triviale : 2,5 vw font 25 px, 8 vw font 80 px. À 1440 px, 1 vw fait 14,4 px. À 375 px, 1 vw fait 3,75 px ; un titre de 8 vw fait donc 30 px. Quand vous convertissez des vw en px pour une vérification rapide, partez de l'un de ces repères et mettez à l'échelle.
Trois largeurs, une feuille de style
Prenez une carte d'une largeur de 80vw, un écart de 4vw et un titre de 6vw. Sur un téléphone de 375 px, cela fait 300 px, 15 px et 22,5 px. Sur une tablette de 768 px, 614 px, 30,7 px et 46 px. Sur un poste de bureau de 1440 px, 1152 px, 57,6 px et 86,4 px. Voir les trois côte à côte vous dit aussitôt que la carte est beaucoup trop large sur le poste de bureau et le titre beaucoup trop grand, et qu'il vous faut probablement une largeur maximale et un clamp.
Au-delà de la fenêtre d'affichage
Unités de conteneur
Le CSS récent propose des unités relatives à un conteneur plutôt qu'à la fenêtre, comme cqw, un centième de la largeur du conteneur. Elles résolvent le problème d'un composant placé dans une barre latérale étroite qui se comporte comme s'il avait toute la fenêtre. Si vous les utilisez, l'arithmétique est la même que pour le vw, avec la largeur du conteneur comme base, et vous pouvez employer ce convertisseur en saisissant cette largeur.
Fenêtres d'affichage petite, grande et dynamique
Sur les téléphones, la zone visible change quand la barre d'adresse disparaît. Pour les hauteurs, les unités plus récentes svh, lvh et dvh décrivent la fenêtre d'affichage petite, grande et dynamique. Pour les largeurs, la situation est plus simple, car la barre d'adresse ne les affecte pas, et le vw est stable. C'est une raison de plus pour laquelle le vw est une unité plus sûre que le vh pour la conception fluide sur mobile.
Pourcentage, vw et grille
Les largeurs en pourcentage suivent le parent, le vw suit la fenêtre, et la grille CSS et flexbox suivent l'espace disponible. Souvent, les meilleures mises en page fluides emploient la grille et les pourcentages pour la structure et le vw seulement pour le texte et l'espacement, car ce sont les choses qui gagnent à suivre directement l'écran. Quand vous convertissez des vw en px pour vérifier une mise en page, demandez-vous si une piste de grille aurait dit la même chose de façon plus robuste.
Expliquer le vw à des gens qui n'écrivent pas de CSS
Prenez la fenêtre comme règle
Clients et collègues comprennent généralement l'idée une fois que vous dites qu'un vw est un pour cent de la largeur de l'écran. Un titre de 5 vw fait cinq pour cent de la largeur de l'écran. Montrez-leur ensuite deux nombres : ce que cela donne sur leur propre téléphone et sur le grand moniteur de la salle de réunion. Quand vous convertissez des vw en px pour les deux largeurs et dites les résultats à voix haute, l'idée d'une taille qui bouge avec l'écran devient concrète.
Dites pourquoi la conception n'est pas fixe
Les parties prenantes non techniques demandent parfois pourquoi la page n'a pas simplement une seule taille pour le titre. La réponse est que les écrans diffèrent d'un facteur sept ou huit entre le plus petit téléphone et le plus grand moniteur, et qu'une taille fixe qui convient à l'un est fausse pour l'autre. Les unités fluides sont la réponse, et les chiffres en pixels de cette page montrent à quel point l'écran modifie la même valeur.
D'où viennent ces unités
Le pixel CSS
Quand les écrans ont cessé d'avoir une densité prévisible, une page mesurée en vrais pixels est devenue une page qui rétrécissait à mesure que les écrans devenaient plus nets. Le pixel CSS a donc été redéfini comme une longueur de référence : environ 1/96 de pouce vue à une distance de lecture confortable. C'est l'unité dans laquelle cette page donne ses réponses.
Les unités de fenêtre d'affichage
Le vw est arrivé avec le design adaptatif : un centième de la largeur de la fenêtre d'affichage, quelle qu'elle soit. Il se place à côté du rem, relatif à la taille de police de la racine, et de l'em, relatif à l'élément. Pour voir à quoi ressemble la même valeur en pixels dans ces unités, Convertir rem en px et comparez.
Habitudes qui gardent le code fluide compréhensible
Commentez les valeurs en pixels
Une ligne comme font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ coûte quelques mots et épargne plusieurs conversions au lecteur suivant.
Gardez la largeur de la maquette en un seul endroit
Si votre projet a une propriété personnalisée pour la largeur à laquelle la maquette a été dessinée, chaque valeur en vw peut y être rattachée. Quand vous convertissez des vw en px pour une relecture, vous savez quelle largeur utiliser.
Utilisez le vw avec parcimonie
Une courte liste de valeurs en vw est facile à raisonner. Une feuille de style où tout est en vw, non. Gardez-le pour les textes d'affichage, les grands écarts et les illustrations.
Testez avec de vrais appareils quand c'est important
Les outils du navigateur simulent bien les largeurs, mais un vrai téléphone montre le comportement réel des barres d'adresse, de la rotation et du zoom. Une vérification de cinq minutes sur un appareil attrape ce qu'une simulation manque.
Convertisseurs associés
La même famille d'outils couvre les conversions voisines. Pour revenir au vw, utilisez Convertir px en vw. Pour les tailles relatives à la racine, il y a Convertir px en rem et Convertir rem en px, et pour les tailles relatives à l'élément, Convertir px en em et Convertir em en px. Pour les couleurs de la même feuille de style, Convertir HEX en RGB et Convertir RGB en HEX s'occupent des notations.
Un exemple détaillé
Supposons qu'un testeur signale que le titre principal est difficile à lire sur un petit téléphone. La feuille de style dit font-size: 5.2vw sans limites. Vous convertissez les vw en px à 360 et lisez 18,7 px, à 768 vous lisez 39,9 px, à 1440 vous lisez 74,9 px. À l'extrémité étroite, le titre est un peu plus grand que le corps de texte et ne se lit plus comme un titre. Vous proposez clamp(2rem, 1rem + 4vw, 5rem), ce qui donne 32 px au plus étroit, environ 51 px à 768 et 5rem, soit 80 px, au plus large. Le testeur confirme qu'il se lit bien maintenant, et le titre s'adapte toujours.
Une courte liste de contrôle
Avant de convertir
Choisissez les largeurs qui vous intéressent, d'après les outils de développement ou votre liste d'appareils cibles.
Pendant la conversion
Saisissez la valeur en vw et chaque largeur tour à tour, et notez les pixels affichés à côté de la base.
Après la conversion
Regardez les extrêmes. Si une taille est trop petite ou trop grande à l'une ou l'autre extrémité, ajoutez des limites avec clamp().
Erreurs courantes
Supposer une réponse unique
Une valeur en vw a une taille en pixels différente à chaque largeur. Donnez la largeur avec chaque chiffre.
Oublier la barre de défilement
100vw l'inclut ; une boîte pleine largeur peut donc déborder.
Dimensionner le corps de texte en vw seul
Il ne peut pas être zoomé. Ajoutez un terme en rem et des limites.
Vos nombres restent sur votre appareil
Le calcul se fait en local. Vos valeurs sont utilisées par votre propre navigateur et rien n'est envoyé nulle part. Il n'y a rien à supprimer ensuite et aucun compte à créer. C'est la manière simple de convertir des vw en px.
Résumé
Pour convertir des vw en px ici, saisissez la taille en vw et la largeur de la fenêtre, et lisez le résultat aussitôt en pixels, d'après la formule px = vw × largeur ÷ 100. La largeur commence à 1440 px, une largeur à laquelle on dessine souvent les maquettes, mais c'est une habitude et non une norme ; saisissez donc la vôtre. La conversion conserve la part de l'écran : un vw est un centième de la largeur de la fenêtre d'affichage, une taille en vw grandit donc et rétrécit avec la fenêtre. Contrairement au rem, le vw n'a pas de valeur par défaut, puisque la fenêtre d'affichage a la largeur de la fenêtre du lecteur. Pour du texte, combinez le vw avec le rem dans clamp(), afin qu'il reste lisible et zoomable. Rien n'est envoyé.