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

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.

Answer 1

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

Answer 2

Non L'utilisation de media queries est intéressante car elle permet de mettre à l'échelle la taille de la police progressivement.

Utilisation de vw ajustera la taille de la police par rapport à la taille du port d'affichage.

Conversion directe vw Les unités de taille de police rendent difficile l'adaptation aux résolutions mobiles et aux ordinateurs de bureau.

Je recommande d'essayer quelque chose comme :

body {
  font-size: calc(.5em + 1vw);
}

Almost before we knew it, we had left the ground.

Crédit : CSS en profondeur

Answer 3

Cela a marché 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/

Answer 4

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

où vous pouvez définir la taille minimale et maximale du texte en fonction de la taille minimale et maximale de la case à cocher. En outre, vous pouvez vérifier la taille d'un élément de domaine différent de la boîte dans laquelle vous voulez appliquer la taille du texte.

Vous redimensionnez le texte entre 19px et 25px sur l'élément #size-2, en fonction de la largeur de 500px et 960px de 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 (500px et 960px).

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

le code complet est 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');
    });
});

Answer 5

Voici comment cela a fonctionné pour moi (où .5 est le facteur d'échelle de la taille de la police)

font-size: calc(.5 * (1.5vh + 1.1vw));

Les écrans étant généralement plus larges que hauts, j'ai utilisé un rapport de 1,1:1,5.

J'ai remarqué que lorsque j'utilise cette formule, la taille de la police reste exactement la même, quel que soit le niveau de zoom utilisé.