在CSS中放大和缩小时，圆圈没有响应

Question

我们的主页上有圈子。我们设法使其在调整屏幕大小方面做出响应，例如992px，768px等。这是我们的CSS代码：

.circle { 
   position: relative; 
   display: inline-block; 
   width: 100%; 
   height: 0; 
   margin-top:10%; 
   margin-left:-15%; 
   padding-bottom:120%; 
   -moz-border-radius:50%; 
   -webkit-border-radius:50%; 
   border-radius:50%; 
   background-color: white; 
   -ms-transform: rotate(20deg); /* IE 9 */ 
   -webkit-transform: rotate(20deg); /* Chrome, Safari, Opera */ 
   transform: rotate(20deg);   
}

问题是，当屏幕放大或缩小时，它们没有响应。