css3でレスポンシブな正方形を作る

完成イメージ

以下に作成したので確認してみてください。
cssでレスポンシブな正方形

css

css3で演算が出来るcalc()と、viewportの値を示す[vw,vh,vmin,vmax]を使います。

code

.squareBox {
    width: calc(100vmin - 60px);
    height: calc(100vmin - 60px);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

解説

要素の縦横に　100vmin　を付与し、幅と高さの値の小さい方を指定します。
例えば、ウィンドウサイズが{ 幅:800px, 横:600px }であれば
width、heightは600pxになります。

そこからcalc()を使用して　-60px　としています。
これは、左右、または上下に常に30pxの余白を取るためです。

　position　から下は要素を中央に配置するための指定になります。

参考

以下の資料を参考にさせていただきました。
HTML6 でも CSS4 でもない Web 技術のゆくえ

この技術を見ていてもたってもいられなくなり、作ってしまいました。
偉大な先輩方に感謝です。