Фигуры в css на различных экранах

circle { 
  display: inline-block; 
  border-radius: 100%; 
} 
 
.half_w { 
  width: 50vw; 
  height: 50vw; 
} 
 
.tenth_h { 
  width: 10vh; 
  height: 10vh; 
} 
 
.red { 
  background-color: red; 
}

<circle class="tenth_h red"></circle> 
<circle class="half_w red"></circle>

.circle { 
  width: 100%; 
  border-radius: 50%; 
  background-color: lightblue; 
} 
 
.circle:before { 
  content:''; 
  padding-top: 100%; 
  display: inline-block; 
}

<div class=circle></div>