電話が

Question

私はスタイルにしようとしているディスプレイ - ときに互いに下の3つの要素をスタックする方法 - 時事通信 - 入力 - ので、あなたの携帯電話でウェブを見ると三つの要素がその他 - 下の1に表示することを提出し、すべてのボックスを同じサイズで整列してください。 誰にでも簡単な解決策がありますか？病気はあなたの助けを非常に感謝します。よろしくお願いいたします。 http://vtwg.eu/michael/index.html V

<div id="contact-area"> 
<form method="post" action="contactengine.php"> 
<label for="Name">NEWSLETTER</label> 
<input type="text" name="Name" id="Name" /> 
<input type="submit" name="submit" value="SUBMIT" class="submit-button" /> 
</form> 
</div> 




input { 
padding: 5px; 
width: 120px; 
font-family: arial, sans-serif; 
font-size: 1em; 
margin: 0px 0px 4px 0px; 
border: 3px solid black; 
background: white; 
} 


.submit-button { 
float: center; 
font-size: 1em; 
} 

label { 
font-family: arial; 
text-align: center; 
width: 120px; 
padding: 5.5px; 
background:#57007F; 
border: 3px solid black; 
margin-left: 20px; 
} 

Answer 1

あなたはmobieビューの設計要素を変更したい場合は、メディアクエリを使用する必要があります。スニペットメディアクエリで、ビューポートの最大幅を480ピクセルに設定します。この値は、望むように変更することができます。ブラウザウィンドウをに絞り込むと、480px未満になると、その違いが表示されます。

input { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    width: 120px; 
 
    font-family: arial, sans-serif; 
 
    font-size: 1em; 
 
    margin: 0px 0px 4px 0px; 
 
    border: 3px solid black; 
 
    background: white; 
 
} 
 
.submit-button { 
 
    font-size: 1em; 
 
    display: inline-block; 
 
} 
 
label { 
 
    font-family: arial; 
 
    text-align: center; 
 
    width: 120px; 
 
    padding: 5.5px; 
 
    background:#57007F; 
 
    border: 3px solid black; 
 
    margin-left: 20px; 
 
    display: inline-block; 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
    input, .submit-button, label { 
 
    display: block; 
 
    width: 120px; 
 
    margin: 5px; 
 
    box-sizing: border-box; 
 
    } 
 
}

<div id="contact-area"> 
 
<form method="post" action="contactengine.php"> 
 
<label for="Name">NEWSLETTER</label> 
 
<input type="text" name="Name" id="Name" /> 
 
<input type="submit" name="submit" value="SUBMIT" class="submit-button" /> 
 
</form> 
 
</div>

Answer 2

解像度に関してメディアクエリでスタイルを書きます。

HTML：

<div id="contact-area"> 
<form method="post" action="contactengine.php"> 
<label for="Name">NEWSLETTER</label> 
<input type="text" name="Name" id="Name" /> 
<input type="submit" name="submit" value="SUBMIT" class="submit-button" /> 
</form> 
</div> 

CSS：

input { 
padding: 5px; 
width: 120px; 
font-family: arial, sans-serif; 
font-size: 1em; 
margin: 0px 0px 4px 0px; 
border: 3px solid black; 
background: white; 
} 


.submit-button { 
float: center; 
font-size: 1em; 
} 

label { 
font-family: arial; 
text-align: center; 
width: 120px; 
padding: 5.5px; 
background:#57007F; 
border: 3px solid black; 
margin-left: 20px; 
} 

@media only screen and (max-width: 767px) { 
    label, 
    #Name, 
    .submit-button 
    { 
     width: 100%; 
     display: block; 
     margin: 5px 0; 
     box-sizing: border-box; 
    } 


    }