webentwicklung-frage-antwort-db.com.de

Ist es möglich, die Textgröße basierend auf der Browserbreite dynamisch zu skalieren?

Hier ist das Projekt für: http://phlak.github.com/jColorClock/ . Wie Sie sehen, wird die Textgröße gerade auf eine statische Größe gesetzt. Ich möchte, dass der Text immer ~ 90% der Breite des Fensters beträgt, aber auch die vertikale Größe entsprechend skaliert. Gibt es einen relativ einfachen Weg, dies zu tun?

27
PHLAK

Hölle ja!

Stellen Sie Ihre <body>-Schriftgröße ein, wenn die Fenstergröße mit einem kleinen Javascript geändert wird. (Ich habe jQuery hier aus praktischen Gründen verwendet:

$( 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();
        });

Da Ihre Schriftgröße in em (perfekt) eingestellt ist, wirkt die prozentuale Schriftgröße des Textelements als universeller Textzoom. Dadurch wird jeder in em gesetzte Text skaliert. Wenn Sie genauer sein möchten, können Sie die prozentuale Schriftgröße auf einen <div> setzen, der nur die zu skalierenden Elemente umgibt.

Hier ein kurzes Beispiel: http://www.spookandpuff.com/examples/dynamicTextSize.html

47
Beejamin

In CSS3 wurden neue Einheiten hinzugefügt, mit denen Sie dies tun können. Sitepoint hat einen guten Überblick . Sie möchten definitiv einen Fallback für ältere Browser bereitstellen, aber dies ist bei weitem die einfachste Lösung: 

font-size: 35vmin;
12

Eine andere Möglichkeit, wenn Sie nicht so viel Präzision benötigen (zB ein paar Größen für verschiedene Geräte), ist die Verwendung von Medienabfragen.

5
sbirch

Genauso wie Beejamins ausgezeichnete Antwort, mit ein paar Änderungen.

  1. Die Mathematik wurde so angepasst, dass Sie die "Standardbreite" einstellen können, bei der keine Skalierung erfolgt. Dies macht es einfacher, eine bestimmte Breite mit exakten Schriftgrößen zu entwerfen.

  2. Die Schriftgröße wird jetzt für das HTML-Element festgelegt, wodurch das Body-Element frei wird, um eine Schriftgröße in der CSS zu speichern.

$(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

Hier habe ich einen anderen Weg gefunden, um dieses Problem zu lösen. 

Durch diesen Code wird die Schriftgröße des Stammelements geändert, wodurch die Größe aller nachfolgenden Größen angepasst wird, für die keine genaue Pixeldefinition vorliegt. 

Eine Referenzbreite wird als Standardgröße angegeben, für die ein rem mit der Standardgröße von 16 Pixel angezeigt wird. Minimale und maximale Größenänderungen sind ebenfalls angegeben. 

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
  • Mit konsistenter Cross-Browser-Kompatibilität
  • Ohne die Zoom-Zugänglichkeit des Browsers zu unterbrechen oder zu stören.
  • Ohne Stilattribute zu ändern. 
  • ohne die Schriftarten zu verwischen.
  • Ohne Browser-Schnüffeln.
  • Funktioniert unter OSX maximieren und wiederherstellen.
  • Mit Rückrufen zum Ermitteln der Zoomstufe des Browsers.

Mimetic.js versuchen

0
Undefined

Wenn Sie jQuery verwenden, möchten Sie vielleicht FitText versuchen. Damit können Sie den Text ganz einfach auf die Breite des Elements skalieren.

Die andere Option ist FlowType.JS , die auf ähnliche Weise funktioniert.

0
Ben