CSS pur pour rendre la taille de police responsive basée sur le nombre dynamique de caractères

CSS3 supporte de nouvelles dimensions qui sont relatives au port de vue. Mais cela ne fonctionne pas dans android < 4.4

1. 3.2 vw = 3.2% de la largeur du viewport
2. 3.2 vh = 3.2% de la hauteur du champ de vision
3. 3.2 vmin = plus petit de 3.2 vw ou 3.2 VH

4. 3.2 vmax = plus grand de 3.2 vw ou 3.2 VH

   body
   {
       font-size: 3.2vw;
   }
   

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

ou

Use media query .La manière la plus simple est d'utiliser les dimensions en % ou em. Il suffit de changer la taille de la police de base tout va changer.

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4em;
}

utiliser les dimensions dans % ou em . Il suffit de changer la taille de la police de base tout va changer. Dans la précédente, vous pouviez juste changer le corps font et non h1 à chaque fois ou laisser la taille de la police de base par défaut de l'appareil et tout le reste dans em

voir kyleschaeffer.com/.... pour plus d'informations sur em, px et %

vous pourriez être intéressé par l'approche calc :

font-size: calc(4vw + 4vh + 2vmin);

fait. Tweak valeurs jusqu'correspond à votre goût.

Source: https://codepen.io/CrocoDillon/pen/fBJxu

la seule façon serait probablement de régler des largeurs différentes pour différentes tailles d'écran, mais cette approche est assez inacurate et vous devriez utiliser une solution js.

h1 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h1 {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    h1 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    h1 {
        font-size: 12px;
    }
}

je sais que je résous une question depuis longtemps sans réponse, mais j'avais la même question et je voulais ajouter quelque chose. S'il vous plaît ne me bannissez pas pour cela, j'ai estimé que c'était assez important pour justifier cette réponse, je vais supprimer si nécessaire. @Joseph Silber a tort, coder toutes les possibilités est en fait une façon viable de le faire. La raison en est qu'il n'y a pas de possibilités infinies. Techniquement, oui, mais 99% de vos visiteurs utiliseront une résolution standard. Cela est doublement vrai pour mobile (la raison principale de la conception de web responsive) parce que la plupart des os mobiles exécuter des applications plein écran sans redimensionnement de fenêtre.

en outre, la hauteur est assez peu pertinent en raison de la barre de défilement (à un certain point, je laisserais immédiatement une page Web qui était plus de 4 ou 5 pieds de long, mais cela tient la plupart du temps vrai), donc vous n'avez besoin de se soucier de la largeur. Et vraiment, les seules largeurs que vous devez coder sont les suivantes: 240, 320, 480 (pour les iThings plus anciens), 640, 800, 1024, 1280, 1440, 1600, 1920, 2048, 2560. Ne vous embêtez même pas pour 4k, il va gonfler vos images trop et la taille 2560 étiré à 100% Largeur semble très bien sur un moniteur 4k (j'ai testé ceci). De plus, ne vous embêtez pas avec 720 (720x480) comme le suggère l'affiche précédente. Ses une résolution presque exclusivement utilisé par les appareils photo numériques, et même alors très rare.

si quelqu'un utilise une résolution exotique, presque n'importe quel Rendu fait dans les 15 dernières années s'arrondira vers le bas, donc si quelqu'un la largeur de l'écran est, dire. 1100, il va charger la règle 1024 CSS, votre site ne devrait pas briser. Cela rend la comptabilité pour les résolutions exotiques en essayant de créer une règle responsive inutile, et l'idée que vous devez coder pour chaque pixel de configuration possible pixel par pixel est ridicule, à moins que quelqu'un utilise un navigateur web si désuet que votre site ne serait probablement pas charger du tout de toute façon.

pour référence, voici une solution JS qui redimensionne une police en fonction de la longueur du texte dans un conteneur.

function scaleFontSize(element) {
    var container = document.getElementById(element);

    // We only want to scale down long text, so first we reset
    // font-size to 100%, in case this function is called multiple times.
    container.style.fontSize = "100%";

    // Now actually check if the text is wider than
    // its container, if so then reduce font-size
    if (container.scrollWidth > container.clientWidth) {
        container.style.fontSize = "70%";
    }
}

Pour moi, j'appelle cette fonction lorsqu'un utilisateur effectue une sélection dans une liste déroulante, puis un div dans mon menu est renseigné (c'est là où j'ai le texte dynamique.

    scaleFontSize("my_container_div");

de plus, j'utilise aussi des ellipses CSS ("...") pour tronquer pourtant, même plus du texte, comme suit:

#my_container_div {
    width: 200px; /* width required for text-overflow to work */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

donc, finalement:

• mots courts: p.ex. "pommes"

  entièrement rendu, belles grandes lettres.

• longs mots: p.ex." pommes et ORANGES "

  est réduit de 70%, via la fonction ci-dessus js scaling.

• Super long words: e.g. " APPLES & ORANGES & BANAN..."

  est réduit de 70% et est tronqué avec un "..."ellipses, via le ci-dessus JS fonction d'échelle et de la règle CSS.

Essayer RFS (souple taille de la police) bibliothèque par MartijnCuppens qui peut-être sera , mis en œuvre dans le Bootstrap

comme beaucoup l'ont mentionné dans les commentaires sur le post de @DMTinter, L'OP s'interrogeait sur le nombre ("quantité") de caractères changeants. Il posait aussi des questions sur CSS, mais comme @Alexander l'a indiqué, "ce n'est pas possible avec seulement css". Pour autant que je puisse dire, cela semble être vrai en ce moment, donc il semble aussi logique que les gens voudraient savoir la meilleure chose suivante.

je ne suis pas particulièrement fier, mais il fonctionne. Semble être une quantité excessive de code l'accomplir. C'est le noyau:

function fitText(el){
  var text = el.text();
  var fsize = parseInt(el.css('font-size'));
  var measured = measureText(text, fsize);

  if (measured.width > el.width()){
    console.log('reducing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize );
      if(m.width > el.width()){
        el.css('font-size', --fsize + 'px');
      }
      else{
        break;
      }
    }
  }
  else if (measured.width < el.width()){
    console.log('increasing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize);
      if(m.width < el.width()-4){ // not sure why -4 is needed (often)
        el.css('font-size', ++fsize + 'px');
      }
      else{
        break;
      }
    }
  }
}

voici un Bin JS: http://jsbin.com/pidavon/edit?html,CSS,JS, console, sortie

S'il vous plaît suggérer des améliorations possibles à elle (Je ne suis pas vraiment intéressé à utiliser canvas pour mesurer le texte...semble comme trop de frais généraux(?)).

merci à @Pete pour la fonction measureText: https://stackoverflow.com/a/4032497/442665

Cette solution pourrait aussi aider:

$(document).ready(function () {
    $(window).resize(function() {
        if ($(window).width() < 600) {
            $('body').css('font-size', '2.8vw' );
        } else if ($(window).width() >= 600 && $(window).width() < 750) {
            $('body').css('font-size', '2.4vw');
        } 
         // and so on... (according to our needs)
        } else if ($(window).width() >= 1200) {
            $('body').css('font-size', '1.2vw');
        }
    }); 
  });

ça a bien marché pour moi !

vw est une solution, mais certainement pas une bonne, dire si vous réglez la largeur de la police à 3vw, il semble normal dans une situation ordinaire, mais une fois que vous le parcourez en utilisant 2K, 4K ou même 8k moniteurs, la police aura l'air énorme, plus sur les appareils plus petits, ils ont l'air minuscule, vous pouvez bien sûr résoudre ce problème en utilisant la requête des médias, mais la vraie douleur est que vous ne pouvez jamais obtenir la taille exacte de la police que vous demandez, parce que vw est limitée à la largeur de la vue, pas de largeur de contenu.

une fois la solution serait d'utiliser calc avec vw.

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

le code ci-dessus définit la taille minimale de police à 42px, et le max à 60px, il commence à se mettre à l'échelle quand le navigateur est plus large que 768px, et atteint progressivement 60 quand il atteint 1440 dans la largeur de fenêtre

pour tout ce qui est plus grand ou plus petit que 1440 et 768, vous pouvez soit lui donner une valeur statique, ou appliquer la même approche.

Point is, cette approche définit votre police par le la taille du contenu. Ce que je veux dire par là, c'est que vous avez un contenu avec une largeur maximale de 1440, et dans quelle situation vous voulez que la police soit 60px, mais quand il est mobile, vous voulez 42, alors vous pouvez adopter cette approche, la police se dimensionne de 768 - 1440, pour tout ce qui est plus grand que 1440, juste lui donner un 60px statique, parce que le contenu lui-même ne se développe pas plus grand que cela.