Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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元素进行硬编码一个width 200px，它覆盖了这个百分比，因为您使用基于p的选择器（最具体的选择器类型）拥有id个元素。更改为类并删除静态200px宽度允许按钮增大/缩小。

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

此外，（虽然技术上有效），最好将a元素放在p元素中以获得更好的语义。

这是一个清理过的版本。运行代码段，然后单击＆＃34;完整页面＆＃34;链接在窗口的顶部，右侧以展开它，您将看到按钮变大，从网格布局到行布局。然后，单击＆＃34;关闭＆＃34;链接在该窗口的右上角，您将看到按钮缩小并再次更改其布局。

＆＃13;

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

＆＃13;

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

＆＃13;

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

超链接中有一个段落，超链接没有浮点数：左。进行以下更改：

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

Answer 5

首先，你有很多冗余代码。我只使用了一个id="options"所有你需要的只是%中按钮的宽度。我还添加了一个很酷的calc()函数，允许在使用元素大小时使用百分比和像素

＆＃13;

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

＆＃13;

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

＆＃13;

如何使这些按钮响应？

5 个答案: