css - 如何在 css 中使圆形链接响应？

Question

我已经为此苦苦挣扎了一段时间。显然使用 % width 和 height 是不够的？

现在我固定了 100px 的宽度和高度，边框半径是它的一半，所以它看起来是圆的。行高设置为 100 像素，因此文本将垂直显示在这些圆圈的中间。我不知道如何以另一种方式垂直居中文本...

如何使此菜单具有响应性，使其随着屏幕尺寸的变化而变小？

HTML:

<div id="menu">
 <ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul> 
</div>

CSS:

#menu ul {list-style-type: none; padding: 0; margin: 0;}
#menu li {display: inline; float: left;}
#menu a {
    display: block;
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: 1px #a2a2a2 solid;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1em;
    text-align: center;
    line-height: 100px;
    margin: 5%;
}

Answer 1

如果您想要真正的“响应能力”，您可以使用与视口(viewport)宽度直接相关的 vw 单位。

Jsfiddle Demo

支持不错:CanIUse.com

#menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#menu li {
  display: inline-block;
}
#menu a {
  display: block;
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  border: 1px #a2a2a2 solid;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 4vw;
  text-align: center;
  line-height: 15vw;
  margin: 5%;
}

<div id="menu">
  <ul>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
  </ul>
</div>