Wie erhöhe ich die Schriftgröße basierend auf der Fensterbreite?

Question

Ich erstelle eine webbasierte App, die im Fernsehen und auf anderen großen Monitoren angezeigt wird. Ich möchte eine schnelle und einfache Möglichkeit, die Schriftgröße an die Fenstergröße anzupassen. Der Text ist dynamisch.

Jede Hilfe wird sehr geschätzt. ;)

Answer 1

OK - für den Anfang sollten Sie Ems für so viele Messungen wie möglich in Ihrer Benutzeroberfläche verwenden. Zumindest Größe alle Ihre Textelemente mit Ems (anstatt Pixel oder%). Wenn es möglich ist, die Breite von Layoutblöcken in Ems festzulegen, wird die App auch proportional dazu skaliert. Wenn Sie alle Dimensionen in Ems festlegen können, ist Ihre gesamte App visuell skalierbar. Der Schlüssel zu Ems besteht darin, dass sie relativ zur Schriftgröße ihres übergeordneten Elements skaliert sind. Das bedeutet, dass Sie die Größe des gesamten Textes proportional anpassen können, indem Sie die Schriftgröße des Körperelements anpassen (seit alles ist relativ zum Körper).

Der letzte Schritt besteht darin, ein Stück JavaScript zu verwenden, um die Breite des Ansichtsfensters zu erkennen und die Schriftgröße des Körpers entsprechend einzustellen. Je nachdem, wie feingranuliert Sie die Skalierung steuern möchten, können Sie entweder Klassen für das body-Element verwenden, um einen Satz vordefinierter Werte einzurichten, oder direkt die Schriftgröße selbst bearbeiten. Ich würde dazu neigen, vorher festgelegte Größen zu verwenden, um das Testen zu erleichtern.

Ich würde eine JavaScript-Bibliothek verwenden, um die Erkennung der Breite des Darstellungsbereichs zu erleichtern - es ist in verschiedenen Browsern bekanntlich anders. Mit jQuery könnte der Code wie folgt aussehen:

$(function(){ 
    var viewPortWidth = $(window).width(); 

    if (viewPortWidth > 1900) {$('body').addClass('extraWide')} 
    else if (viewPortWidth > 1400) {$('body').addClass('wide')} 
    else if (viewPortWidth > 1000) {$('body').addClass('standard')} 
    else if (viewPortWidth > 700) {$('body').addClass('narrow')} 
    else {$('body').addClass('extraNarrow')} 

}); 

Und die CSS:

<style type="text/css"> 

    body {font-size:62.5%;} /* Set the size of 1em to 10px in all browsers */ 

    body.extraWide {font-size:85%;} 
    body.wide {font-size:75%;} 

    body.narrow {font-size:50%;} 
    body.extraNarrow {font-size:40%;} 

</style> 

Diese Werte jedoch optimiert werden, die Sie mögen, natürlich, und Sie können so viele Divisionen einrichten, wie Sie wollen . Dies ist eine sehr schnelle Lösung, sollte aber den Zweck erfüllen.

Ein Hinweis - der JavaScript-Code zeigt nur die Skala einmal beim Laden der Seite an - es wird nicht angepasst, wenn Sie die Größe Ihres Fensters ändern. Das ist eine mögliche Ergänzung, aber es gibt größere Überlegungen, bevor Sie sich auf den Weg machen. Persönlich würde ich sogar darüber nachdenken, den Skalenwert in einem Cookie zu setzen, um die Benutzererfahrung während der gesamten Sitzung konsistent zu halten, anstatt bei jeder Seitenladung eine neue Skalierung vorzunehmen.

Answer 2

Wenn Sie in/Lage interessiert sind dann CSS3 dort zu verwenden, ist eine reine CSS-Lösung - Medien fragen >>http://www.w3.org/TR/css3-mediaqueries/

So zum Beispiel der CSS:

@media screen and (min-device-width: 800px) { ... } 

... können Sie verschiedene Stile für die Seite festlegen, wenn sie auf einem 800-Pixel-Bildschirm oder höher angezeigt werden. Natürlich können Sie diese variieren, wie Sie möchten - starke Sache

Sie auch die prewritten Javascript am Ende dieser Verbindung betrachten möchten ... http://www.themaninblue.com/experiment/ResolutionLayout/#

Answer 3

Beejamin Antwort wie erwartet arbeitete, habe ich eine Reihe Timeout hinzugefügt also würde es in Echtzeit skalieren. Die Skala wird jedoch nicht umgekehrt.

$(document).ready(function() {scaleFont();}); 

    function scaleFont() { 

     var viewPortWidth = $(window).width(); 

     if (viewPortWidth > 1900) {$('body').addClass('extraWide')} 
     else if (viewPortWidth > 1400) {$('body').addClass('wide')} 
     else if (viewPortWidth > 1000) {$('body').addClass('standard')} 
     else if (viewPortWidth > 700) {$('body').addClass('narrow')} 
     else {$('body').addClass('extraNarrow')} 

     setTimeout(scaleFont, 100); 
    } 

EDIT: behobenes REVERSE EFFECT

$(document).ready(function() {scaleFont();}); 

    function scaleFont() { 

     var viewPortWidth = $(window).width(); 

     if (viewPortWidth >= 1900) {$('body').addClass('extraWide').removeClass('wide, standard, narrow, extraNarrow')} 
     else if (viewPortWidth >= 1400) {$('body').addClass('wide').removeClass('extraWide, standard, narrow, extraNarrow')} 
     else if (viewPortWidth >= 1000) {$('body').addClass('standard').removeClass('extraWide, wide, narrow, extraNarrow')} 
     else if (viewPortWidth >= 700) {$('body').addClass('narrow').removeClass('extraWide, standard, wide, extraNarrow')} 
     else {$('body').addClass('extraNarrow').removeClass('extraWide, standard, wide, narrow')} 


     setTimeout(scaleFont, 100); 
    } 

Answer 4

Heres ein einfacher und nicht-jquery Lösung:

onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"} 

Answer 5

Eine bessere Version (für mich) der Lösung von japanFour bereitgestellt :

$(document).ready(scaleFont); 
$(window).resize(scaleFont); 


function scaleFont() { 

    var viewPortWidth = $(window).width(); 

    if (viewPortWidth >= 1900) {$('body').attr('class','extraWide');} 
    else if (viewPortWidth >= 1400) {$('body').attr('class','wide');} 
    else if (viewPortWidth >= 1000) {$('body').attr('class','');} 
    else if (viewPortWidth >= 700) {$('body').attr('class','narrow');} 
    else {$('body').attr('class','extraNarrow');} 
} 

So passt die Größe es nur, wenn Fenstergröße verändert wird (setTimout vermieden wird), und Sie geben body nur die genaue Klasse braucht es

Answer 6

wäre mein Ansatz hier (mit aktuellen Klassen + Drupal 7 jQuery zu entfernen):

(function ($) { 
$(document).ready(function() { 


var bodyClassArr = new Array('extraWide', 'wide', 'normal', 'narrow', 'extraNarrow', 'mobile'); 

function setBodyClass(){ 
    // remove previous classes 
    for(x in bodyClassArr){ 
     if($('body').hasClass(bodyClassArr[x])){ $('body').removeClass(bodyClassArr[x]); } 
    } 
    var viewPortWidth = $(window).width(); 
    if (viewPortWidth > 1900) { $('body').addClass('extraWide'); } 
    else if (viewPortWidth > 1400) { $('body').addClass('wide'); } 
    else if (viewPortWidth > 1000) { $('body').addClass('normal'); } 
    else if (viewPortWidth > 700) { $('body').addClass('narrow'); } 
    else if (viewPortWidth < 700) { $('body').addClass('mobile'); } 
    else { $('body').addClass('normal'); } 
}; 
setBodyClass(); 

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

}); // jquery end 
}(jQuery)); 

Answer 7

Ich weiß das in einer ziemlich alten Frage, aber ich werde sowieso antworten, weil dies eine Frage ist, die viel gesucht werden kann.

Es ist eigentlich ein anderer Ansatz als andere Media Queries, die auch reine CSS ist:

---

Ansichtsfenster Einheiten:vw, vh, vmin, vmax.

Dies sind Längeneinheiten, die 1% der Ansichtsfenstergröße für die Ansichtsfensterbreite (vw), Höhe (vh), die kleinere der beiden (vmin) oder die größere der beiden (vmax) darstellen.

So zum Beispiel könnten Sie verwenden:

CSS:

body { 
    font-size:5vmin; 
} 

Diese die Schriftgröße des gesamten Dokuments der kleinsten Darstellungsgröße auf 5% setzen (die Breite oder die Höhe). So wird zum Beispiel auf einem iPad (1024 x 768 px) die font-size38,4 px(5% von 768 px, weil dies die kleinste Größe der Darstellungsgrößen ist).

---

So groß wie diese es noch mit einigen Problemen kommt auch klingen mag, die berücksichtigt werden sollten:

• Chrome unterstützt keine Darstellungseinheiten für border widths, column gaps, transform values, box shadows oder in calc() bis Version 34;
• Safari & IOS Safari(beide 6 und 7) tut nicht Unterstützung Darstellungsfeld Einheiten für border widths, column gaps, transform values, box shadows oder in calc();
• iOS 7 Safari setzt Werte für Ansichtsfenstereinheiten auf 0, wenn die Seite verlassen wurde und nach 60 Sekunden zurückkehrt;
• Internet Explorer 9 im Druckmodus interpretiert vh als Seiten. 30vh = 30 Seiten;
• iOS 7 Safari berechnet die Breiten neu, die in vh als vw und Höhen in vw als vh festgelegt sind, wenn sich die Ausrichtung ändert.

Quelle:http://caniuse.com/#feat=viewport-units

Answer 8

Gibt es etwas falsch mit dem folgenden Code? Während ich zustimme, dass Medienabfragen sehr nützlich sind, wollte ich die Schriftgröße bestimmter Elemente meiner Seite kontinuierlich skalieren, wenn das Fenster entweder größer oder kleiner wurde. Dieser Code scheint viel einfacher als die anderen jquery Lösungen etablieren Konstanten Klasse basierend auf Ansichtsfenster Pixelbreite:

$(document).ready(function() { 

    var setFontSize = function() { 
    var viewportWidth = $(window).width(); 
    var fontSize = Math.sqrt(viewportWidth/250); 
    $('.myElement').css('font-size',fontSize+'em'); 
    }; 

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

    setFontSize(); 

});