Taille de la police par rapport à la résolution de l'écran de l'utilisateur ?

Question

Taille de la police par rapport à la résolution de l'écran de l'utilisateur ?

Demandé el 2 de Août, 2012: Quand la question a-t-elle été
225611 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai un site web fluide et le menu occupe 20% de sa largeur. Je veux que la taille de la police du menu soit mesurée correctement afin qu'elle corresponde toujours à la largeur de la boîte et qu'elle ne se prolonge jamais jusqu'à la ligne suivante. Je pensais utiliser "em" comme unité, mais elle est relative à la taille de la police du navigateur, donc lorsque je change de résolution, la taille de la police reste la même.

J'ai aussi essayé les pts et les pourcentages. Rien ne fonctionne comme je le souhaite...

Donnez-moi un indice sur la façon de procéder, s'il vous plaît.

Demandé el 2 de Août, 2012 par barakuda28

Answer 1

5 Réponses

Answer 2

66voto

Miljan Puzović Points 3581

Vous pouvez utiliser em , % , px . Mais en combinaison avec media-queries Voir ce lien pour en savoir plus sur les requêtes média. En outre, les CSS3 comportent de nouvelles valeurs pour le dimensionnement des objets par rapport à la taille actuelle de la fenêtre d'affichage : vw , vh y vmin . Voir link à ce sujet.

Répondu el 2 de Août, 2012 par Miljan Puzović (3581 Points )

Answer 3

57voto

aWebDeveloper Points 5546

Nouvelle voie

Il existe plusieurs façons d'y parvenir.

*CSS prend en charge les dimensions qui sont relatives à la fenêtre d'affichage.

3.2vw = 3,2% de la largeur de la fenêtre d'affichage
3.2vh = 3.2% de la hauteur de la fenêtre d'affichage
3.2vmin = Le plus petit de 3.2vw ou 3.2vh
3.2vmax = Le plus grand de 3.2vw ou 3.2vh
```
body
{
    font-size: 3.2vw;
}
```

voir css-tricks.com/.... et regardez aussi caniuse.com/....

Ancienne méthode

Utilisez requête média mais nécessite des tailles de police pour plusieurs points d'arrêt

 body
 {
     font-size: 22px; 
 }
 h1
 {
    font-size:44px;
 }

 @media (min-width: 768px) 
 {
    body
    {
        font-size: 17px; 
    }
    h1
    {
        font-size:24px;
    }
 }

Utilisez les dimensions en % ou rem . Il suffit de changer la taille de la police de base pour que tout change. Contrairement à la version précédente, vous pouvez modifier la police du corps du texte et non celle de l'élément h1 à chaque fois, ou laisser la taille de la police de base à la valeur par défaut de l'appareil, et tout le reste dans l'élément em.

"Root Ems" (rem) : Le "rem" est une unité évolutive. 1rem est égal à la taille de la police du body/html, par exemple, si la taille de la police du document est de 12pt, 1em est égal à 12pt. Les rem sont évolutifs par nature, ainsi 2em équivaudrait à 24pt, .5em à 6pt, etc
Pourcentage (%) : L'unité de pourcentage ressemble beaucoup à l'unité "em", à l'exception de quelques différences fondamentales. Tout d'abord, la taille actuelle de la police est égale à 100 % (c'est-à-dire 12 pt = 100 %). En utilisant l'unité de pourcentage, votre texte reste entièrement adaptable aux appareils mobiles et à l'accessibilité.

voir kyleschaeffer.com/....

Répondu el 24 de Février, 2014 par aWebDeveloper (5546 Points )

Answer 4

54voto

Arpit Srivastava Points 1098

@media screen and (max-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

Il suffit de regarder les différentes tailles d'écran et d'ajouter manuellement la taille de la police.

Répondu el 2 de Août, 2012 par Arpit Srivastava (1098 Points )

Answer 5

20voto

Elad Ziv Points 201

J'ai mis au point une solution JS intéressante, qui convient pour le HTML entièrement réactif (c'est-à-dire le HTML construit avec des pourcentages).

J'utilise uniquement "em" pour définir les tailles de police.
La taille de la police html est fixée à 10 pixels :
```
html {
  font-size: 100%;
  font-size: 62.5%;
}
```
J'appelle une fonction de redimensionnement de la police sur document-ready :

// ceci nécessite JQuery

function doResize() {
    // FONT SIZE
    var ww = $('body').width();
    var maxW = [your design max-width here];
    ww = Math.min(ww, maxW);
    var fw = ww*(10/maxW);
    var fpc = fw*100/16;
    var fpc = Math.round(fpc*100)/100;
    $('html').css('font-size',fpc+'%');
}

Répondu el 24 de Juillet, 2013 par Elad Ziv (201 Points )

Answer 6

7voto

user3334188 Points 167

Je ne sais pas pourquoi c'est si compliqué. Je ferais ce javascript de base

<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>

Où 12 signifie 12px à une résolution de 1280. Vous décidez de la valeur que vous voulez ici

Répondu el 27 de Mai, 2015 par user3334188 (167 Points )

Taille de la police par rapport à la résolution de l'écran de l'utilisateur ?

Réponses

Nouvelle voie

Ancienne méthode

Questions en vedette

Top Tags

Prograide.com

Powered by:

Taille de la police par rapport à la résolution de l'écran de l'utilisateur ?

Réponses

Nouvelle voie

Ancienne méthode

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: