font-size mit CSS clamp()
rem
px
rem
px
rem
px
rem
px



	CSS clamp calculating preferred value for font-size using slope
	
	
	8
	7
	6
	5
	4
	3
	2
	1

	Schriftgröße y
	x
	Layout-Bereich
	
		
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		
	
	10
	20
	30
	40
	50
	60
	70
	80
	90

	
	
	A (1.0 | 20.0)
	B (4.0 | 65.0)
	Δx = 65.0 - 20.0
	Δy = 4.0 - 1.0

	



	
	
	
	
	

	

	

	
		
		
		
		
	


	
let minFontsize = 1;
let maxFontsize = 4;
let minVPsize   = 20;
let maxVPsize   = 65;

let sl = 0;
let intersection = 0;

function slope(minFontsize, maxFontsize, minVPsize, maxVPsize) {
   sl = (maxFontsize - minFontsize) / (maxVPsize - minVPsize);
   intersection = -minVPsize * sl + minFontsize;
   let preferredValue = `${intersection.toFixed(2)}rem + ${(sl * 100).toFixed(2)}vw`;
   //console.log ("preferredValue", preferredValue)
   let clamp = `clamp(${minFontsize}rem, ${preferredValue}, ${maxFontsize}rem)`;

   document.querySelector(".clamped").setAttribute ("style", `font-size: ${clamp}`);
   document.querySelector(".clampit").innerHTML = 
`.clamp {
   font-size: ${clamp}
}`;
   let c = document.querySelector(".clamped");
   let fs = window.getComputedStyle (c).getPropertyValue("font-size");
   //console.log ("real font-size", fs);
}

window.onresize = function() {
   let c = document.querySelector(".clamped");
   let fs = window.getComputedStyle(c).getPropertyValue("font-size");
   //console.log ("real font-size", fs);
}

document.querySelector("#minFontsize").value = minFontsize;
document.querySelector("#maxFontsize").value = maxFontsize;
document.querySelector("#minVPsize").value = minVPsize;
document.querySelector("#maxVPsize").value = maxVPsize;

document.querySelector(".px.minFontsize").innerHTML = minFontsize * 16;
document.querySelector(".px.maxFontsize").innerHTML = maxFontsize * 16;
document.querySelector(".px.minVPsize").innerHTML = minVPsize * 16;
document.querySelector(".px.maxVPsize").innerHTML = maxVPsize * 16;

slope (minFontsize, maxFontsize, minVPsize, maxVPsize);

const demo = document.querySelector(".demo");
demo.addEventListener("input", function (evt) {
const v = evt.target.value.replace(",",".");
const value = parseFloat(v);

if ( isNaN(value) ) {
   document.querySelector(".msg").innerHTML = "Bitte geben Sie eine Zahl ein!"
} else {
   document.querySelector(".msg").innerHTML = "";
}
   switch (evt.target.id) {
      case "minFontsize" :
         minFontsize = value;
         break;
      case "maxFontsize" :
         maxFontsize = value;
         break;
      case "minVPsize" :
         minVPsize = value;
         break;
      case "maxVPsize" :
         maxVPsize = value;
         break;
      default :
         console.log ("Fehler")
   }

   const calcRem = document.getElementsByName("rem");
   if (minFontsize >= maxFontsize) {
      document.querySelector(".msg").innerHTML = "Minimale Schriftgröße muss kleiner als maximale Schriftgröße sein.";
      document.querySelector("#minVPsize").setAttribute ("disabled", "disabled");
      document.querySelector("#maxVPsize").setAttribute ("disabled", "disabled");
   } 
   
   if (minVPsize >= maxVPsize) {
      document.querySelector(".msg").innerHTML = "Kleinste Viewport-Breite muss kleiner als die größte Viewport-Breite sein.";
      document.querySelector("#minFontsize").setAttribute ("disabled", "disabled");
      document.querySelector("#maxFontsize").setAttribute ("disabled", "disabled");
   }
   
   if (minFontsize < maxFontsize && minVPsize < maxVPsize) {
      document.querySelector("#minVPsize").removeAttribute ("disabled");
      document.querySelector("#maxVPsize").removeAttribute ("disabled");
      document.querySelector("#minFontsize").removeAttribute ("disabled");
      document.querySelector("#maxFontsize").removeAttribute ("disabled");
      document.querySelector(".msg").innerHTML = "";
   }
   
   slope(minFontsize, maxFontsize, minVPsize, maxVPsize);
});