在谈论HTML时我是新手,我需要使用Windows CE创建一个带有数据收集器的网页。这些东西有一个非常低分辨率的屏幕(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ódigo do Depósito:</label><input type="text" id="codDeposito" size="20"/>
<label for="codBarras">Có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ódigo do Produto:</label><input type="text" id="codProduto" size="20"/>
<label for="descProduto">Descriçã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ç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">×</a>
Consultado com sucesso!
</div>
很抱歉这个包含大量垃圾的巨码无效。
无论如何,我需要制作一个这样的网页,以非常小的分辨率进行。当我点击Consult时,我的代码显示成功消息,但是在屏幕中间显示,我无法将其显示出来。
您有更好的方法可以提出任何建议吗?
答案 0 :(得分:1)
您需要将media queries添加到您的CSS中。具体还要添加它。 例如:
@media only screen and (max-width: 300px) {
body {
background-color: #000;
}
}