レスポンシブな正方形

css3で演算が出来るcalc()と、viewport[vw,vh,vmin,vmax]を使用し、
要素の縦横に100vminを付与し、幅と高さの値の小さい方を指定。
さらに左右、上下に20pxの余白を-40pxで設定。

code

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