html - 解像度に応じて幅と高さを変更する方法

Question

私は、いくつかの円を載せた順応性のある Web ページを作ろうとしています。問題は、使用する画面サイズに応じて、円が卵のように見えたり、円のように見えたりすることです。私はその問題を解決しました。これは、% の幅と高さで作業しているためです。そのため、正方形または長方形の画面に移動すると、ビューが変わります。

そこで、すべての画面サイズで同じように機能するように、固定サイズを使用することにしました。もちろん、異なる画面解像度にすると、この円は大きくなったり小さくなったりします。私はこれを入れようとしました：

@media screen (min-width: 1620px)
{
    html
    {
        font-size: 100%;
    }
.circle-wrap 
{ 
    width:150px; 
    height:150px;   
    position:absolute; 
    float:left; 
    text-decoration:none; 

    /* Multiple compatibility with border radius */
    /* CSS 3 */
    border-radius: 50%;
    /* Firefox versiones 3.x */
    -moz-border-radius: 50%;
    /* Safari desde 3.2 hasta la 4 */
    -webkit-border-radius: 50%;
    /* Khtml Conqueror */
    -khtml-border-radius: 50%;
}
}

それで、私がやろうとしているのは、クラスのサークルラップを作成して、画面の解像度が異なるためにピクセルサイズを調整することです。しかし、期待どおりには機能しません。なんらかの理由で@media ...独自のクラスまたは識別子を付けられないので、解像度が異なるために円のピクセル幅/高さを動的に変更する方法について解決策を見つけようとしています。

どんな助けでも本当に感謝します!