Блог

Главная - Вопросы по программированию - Простой способ создать мобильную страницу с метками и входными данными

Простой способ создать мобильную страницу с метками и входными данными

#html #css #mobile

#HTML #css #Мобильный

Вопрос:

Я новичок в HTML, и мне нужно создать веб-страницу для сборщика данных с Windows CE. У этих материалов экран с очень низким разрешением (300 пикселей -), и все, что я пытаюсь сделать, выходит из строя при таком разрешении.

Лучший экран, который я мог сделать:

         //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">Camp;oacute;digo do Depamp;oacute;sito:</label><input type="text" id="codDeposito" size="20"/>
    <label for="codBarras">Camp;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">Camp;oacute;digo do Produto:</label><input type="text" id="codProduto" size="20"/>
        <label for="descProduto">Descriamp;ccedil;amp;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">Endereamp;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">amp;times;</a>
    Consultado com sucesso!
</div>

Извините за гигантский код с большим количеством мусора, который ничего не делает..

В любом случае, мне нужно создать веб-страницу, подобную этой, которая хорошо работает в очень маленьком разрешении. И мой код показывает сообщение об успешном завершении, когда я нажимаю «Проконсультироваться», но оно отображается в середине экрана, и я не могу его оттуда вывести.

Есть ли у вас какие-либо предложения по улучшению способа сделать это?

Комментарии:

1. почему бы не использовать css-фреймворк, такой как bootstrap или angular material?

Ответ №1:

Вам нужно добавить медиа-запросы в ваш css. Будьте конкретны также при ее добавлении. Пример:

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