これらのボタンを反応的にするにはどうすればよいですか？

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

、あなたは同じid、あなたはidはCSSスタイリングのためのものであることを利用している唯一の理由で、すべてのpの要素を持っています。 idは一意である必要があります。 p-buttonは、idではなく、クラスである必要があります。

次に、あなたが列クラスが（それは良いことだ）あなたがwidthのための割合を使用しているので、応答するように設定しているが、その後、あなたがハードので、その割合をオーバーライドしている200pxのwidthにp要素をコーディングしていますidベースのセレクタ（最も特定のセレクタのセレクタ）を使用して、p要素がありました。クラスに変更し、静的な幅を削除すると、ボタンが拡大/縮小することができます。その後

人々が小さなまたは大きなビューポートを有することができ、あなたは合理的な制限を設定する必要があるため、min-widthとmax-widthを使用すると、応答性の設計の重要な部分です。

また、（技術的には有効ですが）a要素をp要素の内側に配置する方が、セマンティクスが向上します。

ここではクリーンアップ版です。コードスニペットを実行し、ウィンドウの右上にある「フルページ」リンクをクリックして展開すると、ボタンが大きくなり、グリッドレイアウトから行レイアウトに移動します。そのウィンドウの一番上にある「閉じる」リンクをクリックすると、ボタンが縮小され、レイアウトが再び変更されます。

/* grid */ 
 
.col-1of1 { 
 
\t width: 100%; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
} 
 

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

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

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

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

 
.p-button { 
 
\t font-size: 1.25vw; 
 
\t 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 { 
 
\t color: white; 
 
} 
 

 
.p-button:hover { 
 
\t 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

あなたは、ハイパーリンク内の段落を持っているし、ハイパーリンクは、フロートがありません：左を。次の変更を行います。

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

Answer 4

CSSメディアクエリは、それを行うには素晴らしい機能です。 あなたがメディアでそれを行うことができます例えば

を照会します。

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

NB：私はあなたが同じIDくらいtime.Remember IDは一意の識別子で使用していることに気づきました。同じスタイルに複数の要素を指定する必要がある場合は、Classを使用する必要があります。

Answer 5

まず、冗長コードがたくさんあることです。私はそれを1つだけで作ったid="options"%のボタンの幅に頼っていました。//developer.mozilla：私はまた、要素

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