transform; scale

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nochmal ausführlicher:

Das ist auch dann ein Problem, wenn du Breite des Inhalts und Skalierung als zwei Werte im Stylesheet stehen hast, die voneinander abhängen (bspw. 80% und 1.25).

body
{
  width: 80%;
  transform: scale(1.25);
}

Wenn man die Skalierung ändern will, muss man beide Werte anfassen – schlecht wartbar, fehleranfällig. Sowas sollte man tunlichst vermeiden.

Es sei denn, du verwendest eine custom property (CSS-Variable) und calc() oder einen CSS-Präprozessor, um den einen Wert aus dem anderen zu berechnen.

:root
{
  --scale-factor: 1.25;
}

body
{
  width: calc(100% / var(--scale-factor));
  transform: scale(var(--scale-factor));
}

Das sollte in allen aktuellen Browsern funktionieren; nicht aber in alten IEs. CSS-Postprozessor drüberlaufen lassen …

oder CSS-Präprozessor verwenden:

$scale-factor: 1.25;

body
{
  width: 100% / $scale-factor;
  transform: scale($scale-factor);
}

Und was hat dieser Syntaxhighlighter jetzt schon wieder zu meckern?

---

Ich würde hier aber die Finger von scale() lassen und wie marctrix sagte einfach nur die Basischriftgröße ändern.

LLAP 🖖