web-dev-qa-db-fra.com

Est-il possible de redimensionner dynamiquement la taille du texte en fonction de la largeur du navigateur?

Voici le projet auquel il est destiné: http://phlak.github.com/jColorClock/ . Comme vous pouvez le constater, la taille du texte n’est actuellement définie que comme une taille statique. Je voudrais que le texte soit toujours à environ 90% de la largeur de la fenêtre mais que la taille verticale soit également modifiée en conséquence. Y a-t-il un moyen relativement facile de faire cela?

javascripthtmlcssxhtml
27
PHLAK

Enfer ouais!

Définissez votre taille de police <body> lorsque la fenêtre est redimensionnée avec un peu de javascript. (J'ai utilisé jQuery pour plus de commodité ici:

$( document ).ready( function() {
            var $body = $('body'); //Cache this for performance

            var setBodyScale = function() {
                var scaleSource = $body.width(),
                    scaleFactor = 0.35,                     
                    maxScale = 600,
                    minScale = 30; //Tweak these values to taste

                var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

                if (fontSize > maxScale) fontSize = maxScale;
                if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

                $('body').css('font-size', fontSize + '%');
            }

            $(window).resize(function(){
                setBodyScale();
            });

            //Fire it when the page first loads:
            setBodyScale();
        });

Parce que votre taille de police est définie dans em's (parfait), ajuster le pourcentage de taille de police de l'élément body agit comme un "zoom de texte" universel. Cela redimensionnera tout texte défini dans em - si vous voulez être plus spécifique, vous pouvez définir le pourcentage de taille de police sur un <div> qui entoure uniquement les éléments que vous souhaitez redimensionner.

Voici un exemple rapide: http://www.spookandpuff.com/examples/dynamicTextSize.html

47
Beejamin

De nouvelles unités ont été ajoutées dans CSS3 pour vous permettre de le faire. Sitepoint a un bon aperçu . Vous voulez certainement offrir une solution de secours aux navigateurs plus anciens, mais c'est de loin la solution la plus simple: 

font-size: 35vmin;
12
Stephen M. Harris

Une autre option pour les cas où vous n’avez pas besoin de autant de précision (par exemple, quelques tailles pour différents périphériques) consiste à utiliser des requêtes multimédia.

5
sbirch

Identique à l'excellente réponse de Beejamin, avec quelques ajustements.

  1. Le calcul a été ajusté pour que vous puissiez définir la "largeur par défaut" à laquelle aucune mise à l'échelle ne se produira. Cela facilite la conception à une largeur donnée avec des tailles de police exactes.

  2. La taille de police est maintenant définie sur l'élément html, ce qui libère l'élément body pour contenir une taille de police dans le fichier css.

$(function() {

  // At this width, no scaling occurs. Above/below will scale appropriately.
  var defaultWidth = 1280;

  // This controls how fast the font-size scales. If 1, will scale at the same 
  // rate as the window (i.e. when the window is 50% of the default width, the 
  // font-size will be scaled 50%). If I want the font to not shrink as rapidly 
  // when the page gets smaller, I can set this to a smaller number (e.g. at 0.5,
  // when the window is 50% of default width, the font-size will be scaled 75%).
  var scaleFactor = 0.5;

  // choose a maximum and minimum scale factor (e.g. 4 is 400% and 0.5 is 50%)
  var maxScale = 4;
  var minScale = 0.5;

  var $html = $("html");

  var setHtmlScale = function() {

    var scale = 1 + scaleFactor * ($html.width() - defaultWidth) / defaultWidth;
    if (scale > maxScale) {
      scale = maxScale;
    }
    else if (scale < minScale) {
      scale = minScale;
    }
    $html.css('font-size', scale * 100 + '%');
  };

  $(window).resize(function() {
    setHtmlScale();
  });

  setHtmlScale();
});
5
Raine Revere

Voici un autre moyen que j'ai trouvé pour résoudre ce problème. 

Ce code redimensionne la taille de la police de l'élément racine, redimensionnant ainsi proportionnellement tous les redimensionnements ultérieurs sans définition exacte du pixel. 

Une largeur de référence est spécifiée comme taille par défaut pour laquelle une valeur rem est affichée à la taille par défaut de 16 pixels. Les redimensionnements minimum et maximum sont également indiqués. 

DEMO: http://jsbin.com/kahabo/1/

JS:

var defaultReferenceWidthPx = 320; // Size at which 1 CSS rem displays as 1 rem.
var minRootFontSizePx = 16.363636016845703;
var maxRootFontSizePx = 1024 / 320 * 16.363636016845703;
var defaultRootFontSizePx = 16.363636016845703; // HTML default for 1 rem.
var rootResizeFactor = defaultRootFontSizePx / defaultReferenceWidthPx;
var docEl; // Document's root element (`html`).

var resizeRoot = function() {
  // Use clientWidth (excludes border & scrollbar) or offsetWidth (includes border & scrollbar).
  var referenceWidthPx = docEl.clientWidth;
  var newRootFontSizePx = rootResizeFactor * referenceWidthPx;
  if(newRootFontSizePx < minRootFontSizePx) {
    newRootFontSizePx = minRootFontSizePx;
  } else if(newRootFontSizePx > maxRootFontSizePx) {
    newRootFontSizePx = maxRootFontSizePx;
  }
  docEl.style.fontSize = newRootFontSizePx + 'px';
};

document.addEventListener('DOMContentLoaded', function() {
  docEl = document.documentElement;
  window.addEventListener('resize', resizeRoot, false);
  resizeRoot();
});

HTML:

<div class="fixed">
  Lorem ipsum dolor sit amet, per iisque omnesque inciderint ex. Has at facete iuvaret pertinacia, vocibus nominavi intellegam per cu.
</div>
<div class="responsive">
  Lorem ipsum dolor sit amet, per iisque omnesque inciderint ex. Has at facete iuvaret pertinacia, vocibus nominavi intellegam per cu.
</div>

CSS:

body {
  margin: 0;
}
.fixed {
  border: solid gray;
  width: 100px;
  padding: 10px;
  border-width: 10px;
  font-size: 10px;
}
.responsive {
  border: solid gray;
  width: 6.25rem;
  padding: 0.5rem;
  border-width: 0.75rem;
  font-size: 0.6rem;
}

REPO: https://github.com/jaepage/wtf-is-rem-in-css

0
jtheletter
  • Avec compatibilité compatible entre navigateurs
  • Sans interrompre ni perturber l'accessibilité du zoom du navigateur.
  • Sans altérer les attributs de style. 
  • sans flou des polices.
  • Sans navigateur reniflant.
  • Fonctionne sur OSX maximiser et restaurer.
  • Avec des rappels pour détecter le niveau de zoom du navigateur.

Essayez Mimetic.js

0
Undefined

Si vous utilisez jQuery, vous voudrez peut-être essayer FitText . Il vous permet d’adapter facilement le texte à la largeur de l’élément.

L’autre option est FlowType.JS qui fonctionne de la même manière.

0
Ben