javascript - 如何使这些按钮响应？

Question

我有一个 HTMl 和一个 CSS 实例。

我正在尝试根据屏幕尺寸使这些按钮变小并关联到一列中。现在，当我更改窗口大小时，按钮就会消失。

/* grid */ 

.col-1of1 {
width: 100%;
margin-left: auto;
margin-right: auto;

}

.col-1of2 {
width: 50%;
float: left;
}

.col-1of3 {
width: 33.33%;
float: left;
}

.col-1of4 {
width:25%;
float: left;    
}

.col-1of5 {
width: 20%;
float: left;
}

#p-button {
font-size: 1.5vmin;
color: white;
background: #F0AB00;
    position: relative;
width: 200px;
min-width:20px;
height: 50px;
border-radius: 6px;
margin-top: 180px;
margin-right: 25px;
margin-left: 25px;
line-height: 50px;
text-align: center;

    -webkit-transition-duration: 0.3s; /* Safari */
transition-duration: 0.3s;
}

#p-button: hover {
background: #970A82;
}

<p id="player-text">Please select the number of players</p>

<div class="col-1of1" id="options">
<a href="form1.html?player=1&form=1"><p class="col-1of4" id="p-
button">1 Player</p></a> <!--button--> 
<a href="form1.html?player=2&form=1"><p class="col-1of4" id="p-
button">2 Players</p></a> 
<!--button--> 
<a href="form1.html?player=3&form=1"><p class="col-1of4" id="p-
button">3 Players</p></a> <!--button--> 
<a href="form1.html?player=4&form=1"><p class="col-1of4" id="p-
button">4 Players</p></a> <!--button--> 
</div>

Answer 1

您可以使用媒体查询。例如。

@media(max-width: 767px){
    #p-button{
        font-size: 1vmin;
        width: 100px;
    }
}