Как сделать круглые круглые ссылки отзывчивыми в css?

Question

Я уже много лет борется с этим. По-видимому, использование% ширины и высоты недостаточно?

Прямо сейчас я установил ширину и высоту 100 пикселей, а радиус границы - половину, чтобы он выглядел кругом. Высота линии устанавливается равной 100px, поэтому текст будет отображаться вертикально в середине этих кругов. Я понятия не имею, как вертикально центрировать текст по-другому ...

Как сделать это меню чувствительным, чтобы оно стало меньше по мере изменения размера экрана?

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

Если вы хотите истинного 'отзывчивость' вы можете использовать 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>