Ich habe eine Variante von https://stackoverflow.com/a/17845473/189411 erstellt
Hier können Sie die minimale und maximale Textgröße in Bezug auf die minimale und maximale Größe des Felds festlegen, für das Sie die Größe "aktivieren" möchten. Außerdem können Sie die Größe des dom-Elements überprüfen, das sich von dem Feld unterscheidet, in dem Sie die Textgröße anwenden möchten.
Sie ändern die Größe von Text zwischen 19 und 25 Pixel für das Element # Größe 2, basierend auf der Breite von 500 Pixel und 960 Pixel für das Element # Größe 2
resizeTextInRange(500,960,19,25,'#size-2');
Sie ändern die Größe von Text zwischen 13 und 20 Pixel für ein Element der Größe 1, basierend auf der Breite des Körperelements von 500 und 960 Pixel
resizeTextInRange(500,960,13,20,'#size-1','body');
Den vollständigen Code finden Sie unter https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src
function inRange (x,min,max) {
return Math.min(Math.max(x, min), max);
}
function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {
if(elementCheck==0){elementCheck=elementApply;}
var ww = $(elementCheck).width();
var difW = maxW-minW;
var difT = textMaxS- textMinS;
var rapW = (ww-minW);
var out=(difT/100)*(rapW/(difW/100))+textMinS;
var normalizedOut = inRange(out, textMinS, textMaxS);
$(elementApply).css('font-size',normalizedOut+'px');
console.log(normalizedOut);
}
$(function () {
resizeTextInRange(500,960,19,25,'#size-2');
resizeTextInRange(500,960,13,20,'#size-1','body');
$(window).resize(function () {
resizeTextInRange(500,960,19,25,'#size-2');
resizeTextInRange(500,960,13,20,'#size-1','body');
});
});
<meta name="viewport" content="width=device-width" />Sie können auchmax-widthanstelle vonmax-device-widthfür ein "reaktionsschnelleres" Gefühl verwenden.