のあわせ技で拡大・縮小

この方法は拡大・縮小するブロックの子要素全てに対して位置・高さ・幅などにcalcで拡大・縮小を仕込んでいる。
一見、問題なさそうですが子要素によっては・・・。
・子要素が多いとHTMLとCSSのコーディングが面倒。
・数値指定ができないプロパティがあるとレイアウトが崩れる。
　　└→imgのvertical-alignなど
この問題を解消するにはtransformのscaleを利用するしかなさそう。

留意点：CSSのカスタムプロパティ
ソースをリバエンするとCSS中にスケーリング比を計算している箇所で、CSSのカスタムプロパティを利用しています。
このcssの:root疑似クラスで記述した変数(カスタムプロパティ)がJavaScriptで動的に変更できます。且つ、その変数を用いているCSS箇所に動的に反映されます。
これはSCSSやSASSの変数(コンパイル後は静的)と大きな違いです。ここの落書き人はこれが便利すぎてバニラCSSから抜け出せません。

留意点：拡大縮小の考えかた
拡大縮小の分岐点を幅500pxにしています。つまり幅500pxを堺に縮小と拡大が行われます。この500pxは子要素の文字の大きさにもよりますが、スマホ画面でも可読性が保たれる値として判断しました。
拡大は分岐点を幅500pxの1.6倍(800px)までで、Window幅がそれを超えると拡大を停止してセンタリングしています。
背景画像に見えるのは、実際には前景画像で重ねています。背景画像にしたとしても幅100%やcover指定をしておけば同じ動きをするはずです。

このデモの詳細は
連動する拡大・縮小
を参照