Unités de mesure Wix Studio : px, %, vw, vh… laquelle choisir ? 📏

Dans Wix Studio, chaque largeur, hauteur ou marge s’exprime dans une unité. Choisir la bonne, c’est ce qui fait qu’un élément reste à sa place sur un grand écran comme sur un téléphone.

En bref : le px est fixe, le % dépend du parent, le vw et le vh dépendent de la taille de la fenêtre du navigateur (1 vw = 1 % de sa largeur). Wix Studio ajoute le px*, une unité fluide utilisée par défaut. Pour un site responsive, privilégiez les unités fluides et gardez le px pour ce qui ne doit jamais bouger.

Les unités de mesure disponibles dans Wix Studio

Vous changez l’unité en cliquant dessus, à côté de la valeur, dans l’Inspecteur :

Vous pouvez aussi fixer une taille minimale et maximale : l’élément grandit ou rétrécit avec l’écran, mais s’arrête à ces limites.

vw ou px : quelle différence ?

Le px ne bouge jamais : 100 px restent 100 px sur un écran de 1 440 px comme sur un téléphone de 390 px. Le vw suit la largeur de la fenêtre : 10 vw font 144 px sur un écran de 1 440 px, et seulement 39 px sur un écran de 390 px.

Le vh fonctionne de la même façon, mais sur la hauteur de la fenêtre : 100 vh correspond à tout l’écran en hauteur.

Comment convertir des px en vw ?

La formule est simple : vw = (taille en px ÷ largeur de l’écran) × 100. Par exemple, un titre de 64 px sur une maquette de 1 280 px de large donne 64 ÷ 1 280 × 100 = 5 vw. À l’inverse, px = vw × largeur de l’écran ÷ 100.

Attention, un texte en vw peut devenir minuscule sur mobile. Pour les textes, préférez l’option de taille proportionnelle des styles du site, qui fixe une taille minimale et maximale en pixels.

Les erreurs d’unités les plus courantes

• Mélanger % et px pour les marges d’éléments voisins : ils se désalignent quand l’écran change de taille.

• Mettre une largeur fixe en px sur un grand bloc : il déborde ou crée une barre de défilement horizontale sur mobile.

• Utiliser des marges en % pour un élément qui doit rester à distance fixe du bord : il se déplace selon la largeur de la page.

Pour aller plus loin, voir les marges Wix Studio et le responsive avec Wix Studio.

Mon avis de webdesigner sur les unités de mesure

Au début, gardez les réglages par défaut de Wix Studio : le px* fait déjà une bonne partie du travail responsive. Passez à une autre unité seulement quand vous avez une raison précise : 100 vh pour une section hero plein écran, du % pour une image dans sa colonne, du fr pour une grille.

La règle d’or : une même unité pour des éléments qui doivent rester alignés. Et vérifiez toujours le résultat sur chaque point de rupture. Si un site hérité vous donne du fil à retordre sur mobile, voyez notre offre de refonte de site web.

Questions fréquentes sur les unités de mesure Wix Studio

C’est quoi le px* dans Wix Studio ?

C’est une unité fluide propre à Wix Studio. La valeur affichée est l’équivalent en pixels pour la taille actuelle du canevas, mais elle s’adapte quand l’écran change. C’est l’unité par défaut du docking, des marges et des marges intérieures.

Quelle unité pour une section plein écran ?

Utilisez une hauteur de 100 vh, ou un calcul comme calc(100vh - 100px) pour retirer la hauteur de votre en-tête.

Wix Studio accepte-t-il le rem ou le em ?

Ces unités ne font pas partie de celles que Wix documente pour le dimensionnement des éléments. Pour les textes, utilisez la taille proportionnelle des styles du site.

À propos de l’auteur Alexandre Cottret, webdesigner freelance et fondateur de Trend Design, certifié Wix Partner Legend et Wix Studio. Plus de 150 sites créés depuis 2021, 5/5 sur Malt (93 avis).

Sources : Wix : paramétrer la taille de vos éléments, Wix Studio Academy : tailles et unités avancées.