如何使这些按钮响应？

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;
    }
}

Answer 2

对于初学者来说，所有p元素都具有相同的id并且使用该id的唯一原因是CSS样式。 id必须是唯一的。 p-button应该是一个类，而不是id 。

接下来，您将列类设置为响应式的，因为您正在使用百分比的width （这很好），但是随后您将p元素硬编码为200px的width ，因为您拥有p ，所以将覆盖该百分比元素使用基于id的选择器（最具体的选择器类型）。 更改为类并删除静态的200px宽度可使按钮增大/缩小。

此后，使用min-width 和 max-width是响应式设计的重要组成部分，因为人们的视口可能很小或很大，并且您需要设置合理的限制。

另外，（虽然在技术上是有效的），最好是把a元素的内部p更好的语义元素。

这是一个清理的版本。 运行代码片段，然后单击窗口顶部顶部的“整页”链接以将其展开，您将看到按钮变大，并从网格布局变为行布局。 然后，单击该窗口右侧最顶部的“关闭”链接，您将看到按钮缩小并再次更改其布局。

 /* 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.25vw; background: #F0AB00; position: relative; min-width:75px; max-width:125px; height: 50px; border-radius: 6px; margin: 2em 2em 0 2em; line-height: 50px; text-align: center; transition-duration: 0.3s; } .p-button a { color: white; } .p-button:hover { background: #970A82; } 

 <p id="player-text">Please select the number of players</p> <div class="col-1of1" id="options"> <p class="col-1of4 p-button"> <a href="form1.html?player=1&form=1">1 Player</a> </p> <p class="col-1of4 p-button"> <a href="form1.html?player=2&form=1">2 Players</a> </p> <p class="col-1of4 p-button"> <a href="form1.html?player=3&form=1">3 Players</a> </p> <p class="col-1of4 p-button"> <a href="form1.html?player=4&form=1">4 Players</a> </p> </div> 

Answer 3

CSS媒体查询是一个很棒的功能。 您可以通过媒体查询来做到这一点

例如：

@media(max-width: 767px){
  .col-1of2,.col-1of3,.col-1of4,.col-1of5 {
    width: 100%;
    float: none;
  }
  #p-button{
    font-size: 1vmin;
    width: 100px;
  }
}

注意：我注意到您经常使用相同的ID。记住ID是唯一的标识符。 如果您需要给同一样式多个元素，则必须使用Class。

Answer 4

您在超链接内有一个段落，并且超链接没有float：left。 进行以下更改：

.col-1of4 {
  width: 100%;
  float: left;
  white-space: nowrap;
}
a {
  float: left;
  width: 25%;
  text-align: center;
}

Answer 5

首先是您有很多冗余代码。 我仅用一个id="options"使其起作用。您所需要的只是恢复%的按钮宽度。 我还包括一个很酷的calc()函数，该函数允许在引用元素大小时同时使用百分比和像素

 #options { width: 100%; } #options a { display: block; float: left; color: white; background: #F0AB00; position: relative; width: calc( 25% - 30px ); margin: 15px; border-radius: 6px; line-height: 50px; font-size: 1.5vmin; text-align: center; -webkit-transition-duration: 0.3s; /* Safari */ transition-duration: 0.3s; } 

 <p id="player-text">Please select the number of players</p> <div class="col-1of1" id="options"> <a href="#"> 1 Player </a> <!--button--> <a href="#"> 2 Players </a> <!--button--> <a href="#"> 3 Players </a> <!--button--> <a href="#"> 4 Players </a> <!--button--> </div>