CSSをして幅とブラウザのウィンドウの幅の同じ正方形を実現します

方法1:htmlルートノードのfont-sizeを動的に設定するJSに合わせてremを用い,ブラウザウィンドウ幅の値を6.4rem;とする.

.tar {
    width:6.4rem;
    height:6.4rem;
}

方法2:vwで

.tar {
    width: 100vw;
    height: 100vw;
}

方法3:padding-top: 100%で

.tar {
    width: 100vw;
    padding-top: 100%;
}

padding-topは、要素の幅に基づいてパーセントを設定します.