Ändern der Schriftgröße bei Fenstergrößenänderung

Hallo Leute, ich arbeite an einem kleinen Skript, das die Schriftgröße eines Containers mit der Klasse ".text" annehmen und seine Größe entsprechend ändern sollte (bei Größenänderung). Das ist es, was mir gelungen ist. Aber leider nimmt dies bereits modifizierten Text und verändert ihn unendlich auf der Größe.Ändern der Schriftgröße bei Fenstergrößenänderung

Also im Allgemeinen brauche ich, dass dieses Skript alle verschiedenen Schriftgrößen und Fenster Größe ändern würde, ändern sie nur von Originalgrößen, die ich in CSS definiert.

Ich wäre wirklich dankbar für irgendwelche Hinweise !!

$(".text").each(function() { 
    // getting how many times original size of container changed 
    var starter_height = $('#wrapper').height(); 
    var height_change = starter_height/602; 

    totalHeight = parseInt($(this).css('font-size')); 
    $(this).css({"font-size": totalHeight * height_change + "px"}); 
    console.log(totalHeight); 
});

Quelle

2016-03-20 Deividas

verwenden Warum Sie das tun wollen? Wenn Sie möchten, dass sich Ihre Schriftgröße an die Bildschirmgröße anpasst, verwenden Sie die Schriftgröße in%. Zum Beispiel: Schriftgröße: 100% ist 14px auf einem normalen Laptop-Bildschirm. Sie könnten 110%, 90% oder was auch immer Sie wollen. Vielleicht möchten Sie auch CSS Media Queries suchen –

Warum nicht 'em' oder etwas ähnliches verwenden und die' body' Schriftgröße mit Medienabfragen ändern? – Roope

Oder verwenden Sie 'rem' (da das' em' Werte aber dann * immer * basierend auf der Schriftart des Dokumentenstamms) und verwenden Sie den Vorschlag von @ Roope –

Thx Jungs. Ich habe es geschafft, meine Idee und Ihre zu kombinieren, indem Sie em mit Schriftgröße verwenden. Jetzt muss ich nicht mehr viele verschiedene Medienabfragen schreiben, zumindest für die Schriftart. Ich denke auch, zusätzliches "wenn" hinzuzufügen, um Schriftart nicht die ganze Zeit auf der Größe, aber von irgendeinem Rand zu aktualisieren.

Quelle

2016-03-21 09:42:26 Deividas

Wenn Ihr font-size an die Bildschirmgröße proportional sein sollte, dann können Sie vw and vh

.text-1 { 
 
    font-size: 6vh; 
 
}

<div class="text-1">First Text</div>

Quelle

2016-03-21 12:15:49 xpy

Ändern der Schriftgröße bei Fenstergrößenänderung

Antwort

Verwandte Themen