Curso básico de responsividade

[Frank K Hosaka]

A minha tela de login no projeto php é um horror na tela do celular, ele só aparece a metade do formulário no modo retrato.

Tentei estudar o Laravel para ver como ele consegue colocar todo o formulário do login tanto no modo retrato como no modo paisagem no celular, mas eu não consegui apurar aonde começa o código e onde termina.

Pedi ajuda para o Copilot, e ele me arranjou dois arquivos, o HTML e o CSS.

Peguei o terminal do VS Code e digitei php -S 0.0.0.0:8000 e no celular eu digitei 192.168.0.4:8000, e comecei a estudar a tal da responsividade.

O arquivo CSS é enorme, mas fiquei imaginando como ficaria o celular sem o CSS. O celular continuou funcionando, e diminui todo o HTML nos seguintes códigos:

<form>
    <h2>Login</h2>
    <div>
        <input type="text" id="username" name="username" required placeholder="Usuário">
    </div>
    <div>
        <input type="password" id="password" name="password" required placeholder="Senha">
    </div>
    <input type="submit">
</form>

Ou seja, o HTML é responsivo. O CSS é pura perfumaria.

[Frank K Hosaka]

Tentei copiar o código Laravel para o formulário de login no PHP, e não deu certo. Imaginei que a diferença entre o Laravel e o PHP fosse a tecnologia Vite, então instalei o Tailwind no notebook, e também não deu certo.

Então decidi usar o famoso método da tentativa e erro, e fazer com que o login do PHP fosse mais ou menos parecido com o do Laravel, usando o CDN do Tailwind (o JavaScript reclama que ele não deve ser usado no modo produção, mas é uma das poucas coisas que funciona), e eu consegui:

 

arquivo loginView.php
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
    <h1 class=text-xl>Projeto Chirper</h1>
    <main class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
        <form method="post" action=loginMenu>
            <div>
                <label for="email" class=block>Email</label>
                <input  class="w-full p-2 border border-gray-300 rounded-lg focus:outline-blue-700" id="email" 
                    type="email" name="email" required="required" autofocus="autofocus" autocomplete="username">
            </div>
            <div class="mt-4">
                <label for="password" class=block>Senha</label>
                <input  class="w-full p-2 border border-gray-300 rounded-lg focus:outline-blue-700" id="password" 
                    type="password" name="password" required="required" autocomplete="current-password">
            </div>
            <div class="flex items-center justify-end mt-4">
                <button class="inline-flex items-center px-4 py-2 bg-gray-500 
                    rounded-md font-semibold text-xs text-white uppercase">
                    Entrar
                </button>
            </div>
        </form>
    </main>
</div>

 

Editado ontem às 14:17 por Frank K Hosaka