自适应方块内有文字？

Question

我需要显示div元素，其中包含适合显示分辨率的文本。这意味着属性宽度，高度应该是百分比。

我尝试了一些方法：

<div class="one">
   <span>A</span>
</div>

CSS：

.one { width: 3%; height: 3%}

它不起作用，因为宽度，高度都是相对父元素设置的。

另一种方法是使用填充：

.one { padding: 3% 4% 4% 3%}

这是更好但不够，因为当我改变页面的比例时，我得到椭圆而不是圆形。 那么，用什么做法来解决这个问题呢？

结果我需要使用border-radius: 50%和文本内的方块。