1478 sujets

Web Mobile et responsive web design

Unités vw précisions

Bonjour,
j'ai déjà évoqué ce sujet dans " Unités vw ", il y a quelques temps.
Je voudrais quelques précisions.
Je trouve cette unité utile en responsive, mais je ne la trouve pas souvent dans les sites.
1. Y-a-t-il une explication, même si on utilise les media-queries ?
2. Question de débutant : est-ce que cela ralentit la vitesse d'affichage de la page ?
3. A part les largeurs fixes pour certaines conditions particulières, est-il préférable de les utiliser par rapport aux pixels ou au em ?
Merci d'avance
Les raisons pour lesquelles les unités wiewport (vw, vh,vmin, vmax) ne sont pas souvent présentes est qu'elles sont méconnues et tout récemment compatible avec la plupart des navigateurs (on peut les utiliser depuis au moins deux ans tout de même, voir plus, ça dépend du public du site).

Les unités wiewport n'ont rien à voir avec d'autres unités telles que em, rem ou px, elles ne les remplacent en aucun cas et correspondent à un besoin spécifique. On peut être bluffé par leur découverte mais on s'aperçoit rapidement qu'il n'est pas opportun de les mettre à toutes les sauces de CSS.

Non, il n'y a pas de problème de performance.

Bref, seule l'expérimentation vous amènera à tirer efficacement partit de ces unités... comme pour tout le reste.
Modifié par Olivier C (31 Aug 2017 - 09:30)
Administrateur
Bonjour,

iOS 7 posait moults problèmes avec ce type d'unité... et ce n'est pas très ancien.
Une taille de texte en vw voudrait dire un texte 3x plus gros en 1024 qu'en 320 : rarement souhaité Smiley smile (un mélange de vw, de rem/em/px et de maths permet de lisser ça mais il y a d'autres priorités je crois)

Performance : non, aucune. À part les transitions et animations faites à coup de left/top au lieu de transform: translate et les box-shadow, les CSS ont peu d'influences sur la perf. Même les sélecteurs à la "* + *" où le souci va plutôt venir du nombre d'éléments dans la page... (évidemment ce que je dis va être faux dans pas mal de cas mais tant qu'on constate pas de ralentissement sur un mobile bas de gamme, pas la peine de s'inquiéter : )
Felipe a écrit :
Performance : non, aucune. À part les transitions et animations faites à coup de left/top au lieu de transform: translate...

Ah tiens ! je ne savais pas... merci.
Bonjour.

Je vois bien un cas de figure où le recours aux vw peut être embêtant : quand la taille de la fenêtre devient très petite, si le texte est exprimé en vw, le texte devient tellement petit qu'il est illisible.

Smiley sweatdrop
Salut à tous, je déterre le sujet pour avoir une petite précision...
Je cherche à me servir de vw, vmin, vmax mais quelques subtitilés m'échappent.
J'ai bien compris comme utiliser vw.
je m'en sers pour un titre dans une page, par exemple :
font-size: 3vw;

J'ai bien compris qu'il y avait les cas extremes qui posaient problème, écran très grand ou fenètre très petite... mais je me disais qu'il suffisait de déclarer une taille de police minimale et maximale et que pour le reste on laissait faire vw ?
Je pensais que c'est à ça que servait vmin et vmax...
mais impossible de trouver un exemple précis de leur utilisation dans une css, et j'ai l'impression que ce n'est pas exactement à ça que sert vmin et vmax. Quelqu'un pourrait m'aider à le comprendre ?

Ce que je cherche, c'est un moyen de faire, par exemple :
h1 {
font-size: 3vw;
font-size minimale : 18px;
font-size maximale : 200px;
}

J'espere que j'ai été assez clair...
merci
Modérateur
Salut,

jp.bond a écrit :

J'ai bien compris qu'il y avait les cas extremes qui posaient problème, écran très grand ou fenètre très petite... mais je me disais qu'il suffisait de déclarer une taille de police minimale et maximale et que pour le reste on laissait faire vw ?
Je pensais que c'est à ça que servait vmin et vmax...
Non pas du tout, plus de précision sur cette page.

jp.bond a écrit :

Ce que je cherche, c'est un moyen de faire, par exemple :
h1 {
font-size: 3vw;
font-size minimale : 18px;
font-size maximale : 200px;
}
J'espere que j'ai été assez clair...
merci
Oui, très clair mais rien n'est prévu en Css pour appliquer des seuils à la taille de police.

Pour ce faire, il te faudra user des media-queries pour définir des tailles personnalisées en fonction de la taille du viewport et/ou du type de media.

A titre d'exemple:

/* Déclaration d'une taille de référence utilisée pour tous les médias et en toute circonstance (réécrite par la suite) */
h1 {
 font-size: 3vw;
}

/* Sur très petit support... */
@media (max-width: 320px) {
 h1 {
  font-size: 2rem;
 }
}

/* Pour l'impression... */
@media print {
 h1 {
  font-size: 18px;
 }
}

/* Pour les grands et très grands supports... */
@media (min-width: 1440px) {
 h1 {
  font-size: 8rem;
 }
}
Tu vois le principe ?


PS : Voir si CSS4 ne solutionne pas cette problématique. Le cas échéant la spec serait trop précoce pour passer en dév.
Modifié par Greg_Lumiere (15 Dec 2017 - 11:04)
oui, oui, les médias queries, je connais, je pratique..
je pensais que l'utilisation de vw permettait de se passer des medias queries...

merde, c'est le chainon manquant alors...
parce qu'utliser vw avec des seuils à la taille de police, c'est un peu le monde parfait non ?
Sujet clos
Aller à