You don’t need @media queries for this. This is my try, pure CSS:
.x1 {
overflow:hidden;
}
.x1 .x2 {
display:block;
float:left;
padding: 12.5%;
width:auto;
height:auto;
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius: 50%;
background:#eee;
text-align:center;
position: relative;
}
.x1 .x2 span {
position: absolute;
width: 100%;
left: 0;
top: 48%;
line-height: 1em;
height: 1em;
font-size: 100%;
overflow: hidden;
}