Ho creato una variante di https://stackoverflow.com/a/17845473/189411
dove è possibile impostare la dimensione minima e massima del testo in relazione alla dimensione minima e massima della casella che si desidera "controllare". Inoltre è possibile controllare la dimensione dell'elemento dom diversa dalla casella in cui si desidera applicare la dimensione del testo.
Ridimensiona il testo tra 19 px e 25 px sull'elemento # size-2, in base alla larghezza di 500 px e 960 px dell'elemento # size-2
resizeTextInRange(500,960,19,25,'#size-2');
Ridimensiona il testo tra 13 px e 20 px sull'elemento # size-1, in base alla larghezza di 500 px e 960 px dell'elemento del corpo
resizeTextInRange(500,960,13,20,'#size-1','body');
il codice completo ci sono 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" />
Inoltre puoi usare almax-width
posto dimax-device-width
per una sensazione più "reattiva".