html - 当我更改屏幕大小时，如何调整网页上的链接按钮

Question

我的链接的 html5 代码是这样写的

<nav class="firstlinks">
    <a href="Strengthtraining.html"> Strength training</a>
    <a href="hypertrophy.html"> hypertrophy training</a>
    <a href="endurance.html"> endurance training</a>
</nav>

我的链接的css3代码是这样写的

a {
    Color: gold;
    Background-color: black;
    Padding: 1% 1.5%;
    Margin-right: 5%;
    Boreder-radius: 50%;
    Border: 1px solid black;
    Text-decoration: none;
}

a:visited{
    Color: gray;
}

a:hover{
    Color: green;
}

Answer 1

您可以使用 CSS3 media queries , 根据屏幕宽度应用不同的 CSS。

例如

div { border: 1px solid red; }

@media screen and (max-width: 800px) {
  div { border: 1px solid blue; }
}

<div>Foobar</div>