web-dev-qa-db-fra.com

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

J'ai un site Web fluide et le menu est 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 ne passe jamais à la ligne suivante. Je pensais utiliser "em" comme unité, mais cela dépend de la taille de la police du navigateur. Ainsi, lorsque je change de résolution, la taille de la police reste la même.

Essayé aussi pts et pourcentages. Rien ne fonctionne car j'en ai besoin ...

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

cssmeasurement
72
barakuda28
@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;
  }
}

Vous pouvez le donner manuellement en fonction de la taille de l'écran. Il suffit de regarder différentes tailles d'écran et d'ajouter manuellement la taille de la police.

47
Arpit Srivastava

Vous pouvez utiliser em, %, px. Mais en combinaison avec media-queriesVoir ce lien pour en savoir plus sur les requêtes média. De plus, CSS3 a de nouvelles valeurs pour le dimensionnement des objets par rapport à la taille actuelle de la fenêtre: vw, vh et vmin. Voir lien à ce sujet.

45
Miljan Puzović

Il y a plusieurs façons d'y parvenir

Utilisez la requête multimé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: 768)
    {
       body
       {
           font-size: 17px; 
       }
       h1
       {
           font-size:24px;
       }
    }

Utilisez les dimensions dans % ou em . Il suffit de changer la taille de la police de base, tout va changer. Contrairement à la version précédente, vous pouvez simplement changer la police du corps et non pas h1 à chaque fois, ou laisser la taille de la police de base à la valeur par défaut du périphérique et laisser le tout en place.

  1. “Ems” (em) : “em” est une unité évolutive. Un em est égal à la taille de police actuelle. Par exemple, si la taille de police du document est de 12 pt, 1em est égal à 12 pt. Les ems sont de nature évolutive, donc 2em équivaut à 24pt, .5em à 6pt, etc.
  2. Pourcentage (%) : L’unité de pourcentage est très semblable à l’unité "em", à l’exception de quelques différences fondamentales. Avant tout, la taille de la police actuelle est égale à 100% (soit 12 pt = 100%). Lorsque vous utilisez l'unité de pourcentage, votre texte reste entièrement évolutif pour les appareils mobiles et l'accessibilité.

voir kyleschaeffer.com/....

CSS3 supporte les nouvelles dimensions relatives au port de visualisation. Mais cela ne fonctionne pas sous Android

  1. 3.2vw = 3.2% de la largeur de la fenêtre
  2. 3.2vh = 3.2% de la hauteur de la fenêtre
  3. 3.2vmin = plus petit de 3.2vw ou 3.2vh

  4. 3.2vmax = Plus grand de 3.2vw ou 3.2vh

    body
{
    font-size: 3.2vw;
}

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

21
aWebDeveloper

J'ai développé une solution Nice JS, adaptée au HTML entièrement réactif (HTML construit avec des pourcentages)

  1. J'utilise uniquement "em" pour définir les tailles de police.

  2. la taille de la police html est fixée à 10 pixels:

    html {
  font-size: 100%;
  font-size: 62.5%;
}

  3. J'appelle une fonction de redimensionnement de police sur prêt pour le document:

// cela 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+'%');
}
17
Elad Ziv

Vous pouvez essayer cet outil: http://fittextjs.com/

Je n'ai pas utilisé ce deuxième outil, mais il semble similaire: https://github.com/zachleat/BigText

5
CoderJK

Je ne sais pas pourquoi c'est si compliqué. Je referais ce javascript basique

<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

4
user3334188

J'ai créé une variante de https://stackoverflow.com/a/17845473/189411

où vous pouvez définir la taille de texte minimale et maximale en fonction de la taille minimale et maximale de la boîte que vous souhaitez "vérifier" la taille. De plus, vous pouvez vérifier la taille de l'élément dom différente de celle de la zone dans laquelle vous souhaitez appliquer la taille du texte.

Vous redimensionnez le texte entre 19px et 25px sur l'élément # size-2, basé sur une largeur de 500px et 960px pour l'élément # size-2

resizeTextInRange(500,960,19,25,'#size-2');

Vous redimensionnez le texte entre 13px et 20px sur l'élément # size-1, en fonction de la largeur de l'élément body de 500px et 960px

resizeTextInRange(500,960,13,20,'#size-1','body');

code complet sont là https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src

function inRange (x,min,max) {
    return Math.min(Math.max(x, min), max);
}

function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {

    if(elementCheck==0){elementCheck=elementApply;}

    var ww = $(elementCheck).width();
    var difW = maxW-minW;
    var difT = textMaxS- textMinS;
    var rapW = (ww-minW);
    var out=(difT/100)*(rapW/(difW/100))+textMinS;
    var normalizedOut = inRange(out, textMinS, textMaxS);
    $(elementApply).css('font-size',normalizedOut+'px');

    console.log(normalizedOut);

}

$(function () {
    resizeTextInRange(500,960,19,25,'#size-2');
    resizeTextInRange(500,960,13,20,'#size-1','body');
    $(window).resize(function () {
        resizeTextInRange(500,960,19,25,'#size-2');
        resizeTextInRange(500,960,13,20,'#size-1','body');
    });
});
2
Domenico Monaco

Cela a fonctionné pour moi:

body {

  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum 
viewport width]) / ([maximum viewport width] - [minimum viewport width])));

}

Expliqué en détail ici: https://css-tricks.com/books/volume-i/scale-typography-screen-size/

0
Alex A