のあわせ技で拡大・縮小

transformのscaleでブロック内の要素を一括で拡大・縮小する方法。
短所は背景画像のサイズが変わらない。しかしこの事例の様に前景として重ね表示することで問題なし。
ブロック内の要素を個々に拡大縮小する例はこっち

留意点：座標調整
transformのscaleはブロックのサイズと座標が変わらない。これzoom(非標準機能)もどきになる様に座標の調整を行っている。
・縮小はCSSに「transform-origin: 0 0;」を加えるだけ
・拡大はJSで「style.left」の値を変えて位置調整

留意点：拡大縮小の考えかた
拡大縮小の分岐点を幅500pxにしています。つまり幅500pxを堺に縮小と拡大が行われます。この500pxは子要素の文字の大きさにもよりますが、スマホ画面でも可読性が保たれる値として判断しました。
拡大は分岐点を幅500pxの1.6倍(800px)までで、Window幅がそれを超えると拡大を停止してセンタリングしています。

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