Convertir px en vw Pixels ↔ Viewport width Gratuit En ligne Sûr
Saisissez une valeur en px et lisez-la aussitôt en vw. 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 px en vw
| px | vw |
|---|---|
| 8 | 0.555556 |
| 10 | 0.694444 |
| 12 | 0.833333 |
| 14 | 0.972222 |
| 16 | 1.111111 |
| 18 | 1.25 |
| 20 | 1.388889 |
| 24 | 1.666667 |
| 32 | 2.222222 |
| 48 | 3.333333 |
| 64 | 4.444444 |
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 px en vw
Une graphiste envoie une maquette dessinée en 1440 px de large, avec un titre principal de 96 px et un écart entre sections de 72 px. Sur le vrai web, la page sera vue en 360 px sur un téléphone, 820 px sur une tablette et 2560 px sur un grand moniteur, et la graphiste voudrait que le titre garde sa proportion par rapport à l'écran dans chacun de ces cas. L'unité faite pour cela est la largeur de la fenêtre d'affichage, vw, et le moyen d'y arriver depuis la maquette est de convertir des px en vw : vous prenez la valeur en pixels, vous la divisez par la largeur à laquelle la maquette a été dessinée et vous multipliez par cent. Un titre de 96 px sur un plan de travail de 1440 px fait 6,67 vw, et à partir de là il représente toujours 6,67 pour cent de ce qu'est l'écran.
C'est la promesse de l'unité de fenêtre d'affichage, et aussi son risque. Le rem et l'em partent d'une taille de police, que le navigateur fixe à une valeur par défaut raisonnable. Le vw n'a aucune valeur par défaut : 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 ou tire sur la fenêtre. Le convertisseur ne cache donc pas le seul nombre dont dépend la réponse. La largeur de la maquette se trouve dans un champ, qui commence à 1440 px, et vous pouvez la modifier pour qu'elle corresponde à votre maquette.
L'arithmétique s'exécute dans votre navigateur et rien n'est envoyé. Vous trouverez plus bas la formule, ce que la conversion conserve et ne peut pas conserver, où les unités de fenêtre d'affichage aident et où elles nuisent, le problème d'accessibilité que crée un texte en vw pur, la technique clamp qui le corrige, et une méthode pour transformer une maquette en pixels en feuille de style fluide.
La formule et la largeur
vw égale px divisé par la largeur, fois cent
La formule est vw = px ÷ largeur × 100. Avec une largeur de maquette de 1440 px, une taille de 144 px devient 10 vw, 72 px devient 5 vw et 24 px devient 1,667 vw. La page affiche la largeur à côté du résultat, comme dans 144 px = 10 vw (1440 px), pour que vous voyiez ce qui a été supposé. Un vw est un centième de la largeur de la fenêtre d'affichage ; dans une fenêtre de 1000 px de large, 1 vw équivaut donc à 10 px.
D'où vient le 1440
Les 1440 px sont ici une largeur à laquelle on dessine souvent les maquettes, une habitude et non une norme. Certaines équipes dessinent en 1280, beaucoup en 1920, et les maquettes mobiles en 375 ou 390. Il n'y a pas de bonne réponse, seulement la largeur qu'utilise votre fichier de conception. Saisissez la vôtre : la conversion ne vaut que par la largeur que vous lui donnez.
Utiliser la largeur propre de la maquette
Si la maquette a été dessinée en 1920 px, saisissez 1920, et le même titre de 96 px devient 5 vw. Si vous convertissez des px en vw avec la mauvaise largeur, la page aura l'air juste à une taille d'écran et fausse à toutes les autres, ce qui est un bogue déroutant quand on ne sait pas où chercher.
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 et rétrécit donc avec la fenêtre au lieu de rester fixe. Le résultat est la part de l'écran qu'occupait la valeur en pixels dans votre maquette, et dans le navigateur l'élément garde cette part à toutes les largeurs.
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. La largeur du champ est celle de votre maquette, et la réponse est juste pour un écran de cette largeur et en proportion partout ailleurs.
Arrondi
La division par 1440 produit de longues décimales pour la plupart des tailles. Une valeur comme 6,6667 vw convient dans une feuille de style, mais vous pouvez arrondir à 6,67 ou 6,7 sans aucun changement visible. Gardez deux ou trois chiffres après la virgule ; au-delà, c'est du bruit.
Où les unités de fenêtre d'affichage aident
Titres principaux et grands textes d'affichage
Un titre qui doit occuper une part donnée de l'écran sur chaque appareil est l'usage classique. À la largeur d'un téléphone, un titre fixe de 96 px déborderait ; en vw, il rétrécit avec l'écran et reste sur une seule ligne.
Sections pleine largeur
L'espacement entre les grandes sections d'une page d'atterrissage rend souvent mieux quand il s'adapte à l'écran, pour que la page garde son rythme sur un petit ordinateur portable comme sur un grand écran. Les écarts en vw y parviennent.
Illustrations qui doivent garder leur forme
Les images principales, illustrations et formes décoratives dimensionnées en vw gardent leurs proportions par rapport à la fenêtre ; la composition ne s'effondre donc pas quand l'écran change.
Texte fluide avec des limites
Combiné à clamp(), le vw donne un texte qui grandit en douceur entre un minimum et un maximum. C'est la technique que les feuilles de style modernes emploient pour les titres, et elle est traitée plus bas.
Où les unités de fenêtre d'affichage nuisent
Corps de texte en vw pur
Un texte dimensionné seulement en vw ne réagit pas quand le lecteur zoome sur la page dans le navigateur, car le zoom change la taille en pixels de la fenêtre, mais une taille en vw en garde la même part. Les personnes qui comptent sur le zoom, souvent à cause d'une vue faible, se retrouvent avec un texte qu'elles ne peuvent pas agrandir. Les directives d'accessibilité demandent que le texte puisse être redimensionné, et une taille en vw pur échoue à ce test.
Extrêmes minuscules et énormes
À 320 px de large, un titre de 6,67 vw fait 21 px, ce qui peut être trop petit. À 2560 px de large, il fait 171 px, ce qui est énorme. Sans limites, la proportion qui paraissait juste à 1440 peut être absurde aux extrémités.
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. Une boîte réglée à 100vw sera donc un peu plus large que la zone visible quand la page défile, et une barre de défilement horizontale peut apparaître. Sachez-le avant de construire une mise en page pleine largeur à partir de vw.
La technique clamp
Fixer un plancher et un plafond
La fonction CSS clamp(min, préféré, max) prend un minimum, une valeur préférée et un maximum. Pour du texte, écrivez le minimum et le maximum en rem, et la valeur préférée en vw plus un terme en rem : font-size: clamp(2rem, 1rem + 4vw, 6rem). La taille grandit avec la fenêtre entre 32 et 96 px et ne dépasse aucune des deux extrémités. Comme une partie est en rem, le texte respecte toujours les réglages du lecteur.
Comment construire le terme intermédiaire
Choisissez deux largeurs d'écran et les tailles que vous voulez à chacune. Par exemple 32 px à 360 px de large et 96 px à 1440 px de large. La pente est (96 − 32) ÷ (1440 − 360) = 0,0593 px par px de largeur, soit 5,93 vw, et l'ordonnée à l'origine est 32 − 0,0593 × 360 = 10,67 px, environ 0,667 rem. Le terme préféré est donc 0.667rem + 5.93vw. Le convertisseur aide pour la partie en vw, et une minute de calcul fait le reste.
Pourquoi c'est le bon équilibre
Avec clamp, vous obtenez le comportement fluide que veulent les graphistes et l'accessibilité dont les lecteurs ont besoin. C'est la réponse au problème décrit plus haut, et la raison pour laquelle la plupart des feuilles de style modernes n'emploient le vw qu'à l'intérieur de clamp.
Comment convertir des px en vw ici
Saisissez la valeur en pixels
Entrez la taille en pixels dans le premier champ. Les décimales sont acceptées.
Réglez la largeur de la maquette
Laissez-la à 1440 si c'est la largeur de votre maquette. Changez-la sinon. Le résultat se met à jour au fil de la saisie.
Copiez la valeur en vw
Utilisez le chiffre dans votre CSS avec son unité, comme dans font-size: 6.67vw. Pour du texte, placez-le dans clamp() avec des limites en rem.
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 votre maquette est dessinée.
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. Si vous avez besoin de tailles relatives au texte plutôt qu'à l'écran, Convertir px en rem.
Pièges quand vous convertissez des px en vw
Utiliser la mauvaise largeur de maquette
L'erreur la plus courante. Si votre maquette fait 1920 de large et que vous convertissez avec 1440, chaque taille est décalée d'un tiers. Confirmez la largeur du cadre dans votre outil de conception.
Oublier la maquette mobile
Beaucoup d'équipes ont deux maquettes, une pour le bureau et une pour le téléphone. Un titre de 96 px dans la première et de 40 px dans la seconde ne correspond pas à une seule valeur en vw. Utilisez deux largeurs, deux conversions et un clamp pour les relier.
Mettre toute la page en vw
Une page où tout s'adapte à la fenêtre perd son sens de la lecture : les lignes deviennent trop longues sur les grands écrans et le texte trop petit sur les étroits. Utilisez le vw pour les quelques éléments qui doivent s'adapter, et des tailles fixes ou en rem pour le reste.
Ignorer le problème du zoom
Testez votre page avec le navigateur zoomé à 200 pour cent. Si le texte ne grandit pas, les tailles ont besoin d'un terme en rem.
Questions que l'on se pose avant de convertir
Combien de vw font 100 px ?
À une largeur de maquette de 1440 px, environ 6,94 vw.
Quelle est la meilleure largeur de maquette à utiliser ?
Celle à laquelle votre maquette a été dessinée. Il n'y a pas de valeur par défaut universelle.
Le vw est-il meilleur que le rem ?
Ils font des travaux différents. Le rem suit la taille de texte du lecteur ; le vw suit la fenêtre. Utilisez chacun pour ce en quoi il est bon.
Puis-je utiliser le vw pour la taille de police ?
Oui, mais placez-le dans clamp() avec des limites en rem, pour que le texte reste lisible et puisse encore être zoomé.
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 vw en px, qui multiplie par la largeur au lieu de diviser.
Bien choisir quand vous convertissez des px en vw
Décidez ce qui doit s'adapter à l'écran
Texte principal, grands écarts et illustrations : oui. Corps de texte, bordures, petits contrôles : non. Plus votre liste de valeurs en vw est courte, plus la page est robuste.
Convertissez à l'étape de la conception
Si vous convertissez des px en vw en lisant la maquette, vous voyez tout de suite quelles valeurs sortent bizarres et pouvez demander à la graphiste des valeurs plus nettes. Un titre qui s'avère faire 6,6667 vw invite à discuter pour le passer à 6,5 ou 7.
Gardez une trace de la largeur
Écrivez la largeur de la maquette dans un commentaire en tête de la feuille de style, pour que quiconque convertit plus tard utilise la même. Des largeurs mélangées produisent une page incohérente d'une manière que personne ne sait vraiment expliquer.
De la maquette à une feuille de style fluide
Listez les tailles qui doivent s'adapter
Ouvrez le fichier de conception et notez chaque taille que vous voulez voir suivre l'écran : le titre principal, les écarts entre sections, peut-être une grande illustration. Pour chacune, convertissez les px en vw par rapport à la largeur du cadre, et notez le résultat. La plupart des pages finissent avec moins de dix valeurs de ce type, et tout le reste demeure en rem ou en pixels.
Vérifiez séparément le cadre mobile
S'il existe une maquette pour téléphone, lisez les mêmes éléments à sa largeur. Un titre de 96 px dans un cadre de 1440 px et de 40 px dans un cadre de 375 px ne correspond à aucune valeur unique en vw, ce qui est le signal pour utiliser clamp : la taille du téléphone devient le plancher, celle du bureau le plafond, et le terme en vw fait le travail entre les deux. Quand vous convertissez des px en vw pour chaque cadre, les deux nombres définissent la pente.
Passez en revue à trois largeurs
Regardez la page terminée à environ 360, 820 et 1440 pixels, et une fois à 2560. Les mises en page fluides sont faciles à réussir à la largeur de la maquette et subtilement fausses ailleurs, et un bref passage par ces largeurs trouve la plupart des problèmes avant qu'un visiteur ne le fasse.
Gardez l'unité hors des textes longs
Les lignes de texte à lire se dimensionnent mieux en rem, avec une longueur de ligne maximale d'environ 60 à 75 caractères. Utilisez l'unité de fenêtre d'affichage pour les textes d'affichage et l'espacement, et laissez le texte à lire être stable.
Convertisseurs associés
La même famille d'outils couvre les conversions voisines. Pour revenir aux pixels, utilisez Convertir vw en px. 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 HEX en HSL s'occupent des notations.
Un exemple détaillé
Supposons qu'une page d'atterrissage soit conçue en 1440 px, avec un titre principal de 96 px et un écart de 72 px au-dessus. Vous saisissez 96 et lisez 6,667 vw, saisissez 72 et lisez 5 vw. Dans une fenêtre de 1000 px, le titre fait 66,7 px et l'écart 50 px, en proportion. Mais sur un téléphone de 360 px de large, le titre ferait 24 px, ce qui est plus petit que vous ne le voulez ; vous écrivez donc le titre sous la forme clamp(2.25rem, 1rem + 5vw, 6rem), ce qui donne un plancher de 36 px et un plafond de 96 px, et il reste lisible et zoomable. L'écart, qui n'a pas de texte, reste en vw simple.
Une courte liste de contrôle
Avant de convertir
Trouvez la largeur de la maquette. Décidez quelles tailles doivent s'adapter et lesquelles non.
Pendant la conversion
Saisissez la valeur en pixels et la largeur de la maquette, et copiez le chiffre en vw avec son unité.
Après la conversion
Redimensionnez la fenêtre de la largeur d'un téléphone à un grand moniteur, et zoomez la page à 200 pour cent. Ajoutez des limites avec clamp() là où les extrêmes paraissent faux.
Erreurs courantes
Supposer que 1440 est une norme
Ce n'est qu'une habitude. Utilisez votre propre largeur.
Dimensionner le corps de texte en vw seul
Il ne peut pas être zoomé. Ajoutez un terme en rem et des limites.
Oublier la barre de défilement
100vw est plus large que la zone visible sur les pages de bureau qui défilent.
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 px en vw.
Résumé
Pour convertir des px en vw ici, saisissez la taille en pixels et la largeur de votre maquette, et lisez le résultat aussitôt, d'après la formule vw = px ÷ 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é.