[Résolu] Probleme de redimensionnement de font-size

bonjour à tous,

j'ai un souci avec la font-size d'un paragraphe qui ne veut pas bouger d'un pixel (ou plutôt d'un em !) au redimensionnement de la fenêtre du navigateur ! quid ?
j'ai un logo sur mon site avec une citation à côté ; l'image du logo est dans un <p> et la citation dans un autre <p> ; les 2 paragraphes sont en float:left; avec chacun une width en % ;
ils sont contenus dans une <div> avec également une width en %;
la font-size de la citation est en em et, a la base du site, la balise HTML a une font-size:100%;
voilà, après avoir bien suivi a la lettre les tutos Alsacréations de Raphael et fvsch sur les tailles de police, je ne comprends pas pourquoi, lorsque je redimensionne ma fenêtre de navigateur , cette "cochonnerie" de citation ne veut pas se réduire !!! nada ! rien ! elle bouge pas d'un poil !

voici le code html et css e la div du logo :

<div class="customlogo">
<p class="logo-aviv">
<p class="logo-desc">

.customlogo{width:35%;float:left;position:relative;top:38px;}
.logo-aviv{width:32%;float:left;}
.logo-desc{width:63%;float:left;color:#fff;text-decoration:none;background-color:#47A3D4;opacity: 0.9;filter:alpha(opacity=90);padding:12px 0 5px 2%;height:140px;font-size:1.9em;}

si quelqu'un peut éclairer ma lanterne , merci d'avance.
bon week-end a tous

Je crains que cela ne fonctionne pas comme tu le penses.

La taille des caractères ne change pas comme ça avec le redimensionnement de la fenêtre du navigateur. Au contraire, ils répondent aux paramètres de taille de zoom / mise en forme du navigateur, comme si tu appuies sur Ctrl et +.

Je pense qu'il faut adapter avec les @media queries. Peut être que je me trompe et que je n'ai pas tout suivi sur l'évolution du font-size responsive mais par exemple à l'intérieur de ton CSS essaie d'ajouter ça en variant les 320px selon la valeur que tu souhaites :

@media only screen and (max-width: 320px) {

   html { font-size: 2em; }

}

Modifié par artsx (16 Aug 2013 - 12:51)

salut,
pour avoir un texte en responsive de nouvelles unités ont été introduites, il s'agit des viewport units. Tu as :
- "vh" qui correspond au viewport hiehgt, soit la hauteur du viewport
- "vw" qui correspond au viewport width, soit la largeur du viewport
- "vmax" qui correspond à la dimension du viewport la plus grande (soit largeur soit hauteur)
- "vmin" qui correspond à la dimension du viewport la plus petite (soit largeur soit hauteur). À noter que pour IE9 il faut utiliser "vm" pour "vmin".

Ces unités ne sont pas encore bien intégrés et sont apparues récemment même avec les navigateurs "sérieux".
Tu n'as qu'à faire une recherche sur Google pour plus d'infos.

bonjour tous ,

et merci de me répondre; @artsx j'ai testé mais ... rien, ça bouge pas

a écrit :
@artsx j'ai testé mais ... Smiley bawling rien, ça bouge pas

Et à Zelalsan qui s'est donné la peine de te répondre...

@Zelalsan

pardon ! je manque à tous mes devoirs de politesse pour toi qui t'es aussi donné la peine de répondre ! Merci pour le tuyau mais ça marche pas non plus ! et ce que j'aurais surtout souhaité c'est comprendre comment ça fonctionne puisque je pensais que les tailles de police "élastique" (em, pourcentage) pouvaient se redimensionner au m titre que les div.
'ai lu plein de tutos...ai'pas trouvé d'solutions

bonne continuation
Modifié par eviouchka (19 Aug 2013 - 14:33)

Je ne sais pas comment tu les a utilisées mais comme je disais c'est tout nouveau et pas encore très bien implémenté. Sur quel navigateur et quelle version as-tu testé ?
Pour info, les tailles de police en "% et em" ne se réfèrent absolument pas à la taille de conteneur mais à la taille de police de l'élément parent.

Pourtant artsx et Zelalsan ont donné tous les éléments de réponse possible sur le sujet

Non, les unités comme les ems et les pourcentages appliqués aux fontes ne se redimensionnent pas avec la fenêtre; elles sont relatives à la taille par défaut du texte dans le navigateur. Celle ci est à 16px à l'origine mais peut être modifié par l'utilisateur... tant qu'il n'y touche pas, la taille de tes textes ne bougera pas.

A moins d'utiliser les unités de viewport dont parle Zelalsan, qui font exactement ce que tu décris. Le seul problème étant le support encore un peu lacunaire.

a écrit :
Sur quel navigateur et quelle version as-tu testé ?

@Zelalsan -> sous FF 22.0

ok @sephitan et @Zelalsan , j'ai compris le coup de la taille des fonts ...il doit bien y avoir un moyen de réduire le texte contenu dans un <p> alors je vais chercher comment et dès que j'ai trouvé , je poste !
A+

FF22 comprend très bien les viewport units.

<p>Ceci est un texte.</p>

p {font-size:4vmin;font-size:4vm;}

Réduit ta fenêtre et redimensionne-là pour voir.

Merci @Zelalsan

a écrit :
p {font-size:4vmin;font-size:4vm;}

fonctionne bien ... mais pas partout effectivement donc je cherche encore
a+

L'autre solution sont les medias queries et il n'y a rien d'autre de "correcte".

Tu peux essayer ceci :

@media only screen and (max-width: 320px) {

   .logo-desc { font-size: 10px; }

}

A la place de 320px met quelque chose au pif pour pouvoir tester rapidement si ça marche ou non avec le redimensionnement.

Il n'y a aucune raison que ça ne marche pas (hormis IE) sur les navigateurs digne de ce nom.

J'ai utilisé cette méthode pour mon site perso sur la version mobile et j'ai aucun soucis, ça fonctionne parfaitement

@artsx merci, ça marche; j'ai effectivement opté pour les media-queries quand l'unité vmin cité par @Zelalsan ne fonctionne pas.

Je passe le post en résolu puisque je crois que nous avons fait le tour de la question
merci à tous