rem
px
px
rem
px
px
rem
px
px
rem
px
px
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); });