ラベルと入力でモバイルページを作成する簡単な方法

Question

HTMLについて話すときは初心者です.Windows CEでデータコレクタにWebページを作成する必要があります。これらのものは非常に低い解像度の画面（300px-）を持っています。

最高の画面は私が作ることができます：何もしないゴミの多い巨大なコードのための

 //Remove a mensagem de sucesso ou falha 
 
     function none(){ 
 
      document.getElementById('message').style.display = 'none'; 
 
     } 
 

 
     //Insere a mensagem de sucesso ou falha 
 
     function block(){ 
 
      document.getElementById('message').style.display = 'block'; 
 
     } 
 

 
     function setCodDeposito1(){ 
 
      document.getElementById('codDeposito').value = "1"; 
 
     } 
 

 
     function alertSuccess(){ 
 
      alert(""); 
 
     }

 body{ 
 
     margin-left: 3px; 
 
     font-family: sans-serif; 
 

 
     } 
 

 
     .btnLimpar{ 
 
     margin-top:5px; 
 
     padding: 0px 65px 0px; 
 
     margin-left: 180px; 
 
     text-align: center; 
 
     } 
 
     .btnConsulta{ 
 
     width: 100%; 
 
     text-align: center; 
 
     margin: 5px 0px 4px 0px; 
 

 
     } 
 

 
     label{ 
 
     margin: 3px 0px 3px; 
 
     display:inline-block; 
 
     float: left; 
 
     clear: both; 
 
     text-align:right; 
 
     } 
 

 
     h3{ 
 
     align-self: center; 
 
     } 
 
     input{ 
 
     margin-bottom: -10px; 
 
     text-align: right; 
 
     float: right; 
 

 
     } 
 

 
     #main{ 
 
      overflow: all; 
 
      width: 100%; 
 
      height: 100%; 
 
     }

<h3>Consulta de Produtos</h3> 
 
<div id="main"> 
 
    <label for="codDeposito">C&oacute;digo do Dep&oacute;sito:</label><input type="text" id="codDeposito" size="20"/> 
 
    <label for="codBarras">C&oacute;digo de Barras:</label><input type="text" id="codBarras" size="20" /> 
 
    <input type="button" class="btnConsulta" value="Consultar" onclick="block(); setCodDeposito1();"/> 
 
    <form> 
 
     <label for="codProduto">C&oacute;digo do Produto:</label><input type="text" id="codProduto" size="20"/> 
 
     <label for="descProduto">Descri&ccedil;&atilde;o do Produto:</label><input type="text" id="descProduto" size="20"/> 
 
     <label for="complemento">Complemento:</label><input type="text" id="complemento" size="20"/> 
 
     <label for="enderecamento">Endere&ccedil;amento:</label><input type="text" id="enderecamento" size="20"/> 
 
     <label for="qtdEstoque">Qtd em Estoque:</label><input type="text" id="qtdEstoque" size="20"/> 
 
     <input type="button" class="btnLimpar" value="Limpar" onClick="this.form.reset();none();"/> 
 
    </form> 
 
</div> 
 
<div class="alert" id="message" style="display: none;"> 
 
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
 
    Consultado com sucesso! 
 
</div>

申し訳ありません..

をとにかく、私は確認する必要がありこのようなWebページは非常に小さな解像度でうまくいく。そして、私のコンサルタントをクリックすると、私のコードは成功メッセージを表示していますが、それは画面の中央に表示されており、私はそれをそこに持ち出すことができません。

これを行うにはより良い方法がありますか？

Answer 1

あなたのCSSにmedia queriesを追加する必要があります。それを追加する際にも特定してください。 例：

@media only screen and (max-width: 300px) { 
    body { 
     background-color: #000; 
    } 
}