Mit diesem clamp Rechner kannst du dir CSS Anweisungen generieren, die du bswp. für font-sizes, margins und paddings verwenden kannst.

Die „px Viewport width“ gibt die Breite deines Main Containers auf Desktop-Bildschirmen an. Bei mir ist die häufig 1440px. Es gibt verschiedene Varianten davon, einige nutzen 1280px, einige 1300px, einige 1600px oder 1820px. Der Wert spielt keine Rolle, wichtig ist nur, dass du dort den für die jeweilige Website verwendete width nimmst. Anhand dieser wird berechnet, wie sich die Desktop-Mobile Grössen berechnen.

Die „max px Grösse Desktop“ gibt die maximale Grösse einer Schrift oder eines Abstandes auf Desktop Bildschirmen an. Wenn deine H1 bswp. nie Grösser als 48px sein soll, gibst du die dort an.

Die „min px Grösse Mobile“ gibt die Grösse einer Schrift oder eines Abstands auf Mobilen-Geräten an. Wenn die H1 bspw. nie kleiner als 24px sein soll, gibst du die dort an.

Wenn ich nun die Werte 48px, 24px und 1440px eingebe, wird folgende Zeile ausgegeben.

clamp(1.5rem, 3.333vw, 3rem);

Du kannst dir diese Zeile nun kopieren und bspw. bei deiner H1 font-size eingeben:

h1 {
  font-size: clamp(1.5rem, 3.333vw, 3rem);
}

Es berechnet die px Werte automatisch in rem Werte um. Achtung, dabei wird eine root/HTML font-size von 100% verwendet. Hacks wie HTML font-size: 62.5% sind nur den Augen einfacher, dann völlig unnötig. Das Hauptargument dabei: Man kann sich die rem Werte viel besser merken, wenn man weiss, dass 1rem 10px sind! Das ist ein richtig doofes Argument. Wenn du oft mit CSS arbeitest, weisst du mit der Zeit auch auswendig, dass 1.125rem 18px sind. Du kennst nach einer Woche alle rem-px Werte auswendig. Es gibt keine Komponenten/Plugins, welche als Voreinstellung root/html font-sizes von 62.5% nutzen. Wenn du nun 62.5% und 100% mischst, dann viel Spass bei debuggen. Es lohnt sich nicht. Lerne die rem Werte bei 100% und alles ist gut. Ich meine, du musst da vielleicht 6-8 auswendig lernen. Die werden sich aber nie mehr verändern.

Warum ich im Rechner nicht gleich rem Werte verwende?
Weil sehr viele Frameworks bei paddings und margins noch mit px Werten rechnen und nur für font-sizes rem Werte nutzen.

Warum nicht immer px verwenden?
Weil du damit Browser-Funktionalitäten aushebelst und dem User die Kontrolle nimmst, wie er Websites verwenden will. Wenn jemand nicht mehr gut siehst und Browser-Fenster jeweils 200% zoomt, dann funktioniert das mit px Werten nicht. Rem Werte respektieren die Browser-Einstellungen der User.