Como hacer un formulario de tipo Login adaptable a cualquier dispositivo (Responsive).

Lo primero que realizaras es una carpeta con el nombre que desees y dentro de ella crearas dos carpetas mas una para la imagen de fondo y la otra para la hoja de estilo CSS. El código en HTML se encuentra en la parte de abajo.

 Codigo en HTML
Este código va dentro de una archivo con extensión .HTML


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>LoginHTML</title>
        <link rel="stylesheet" href="estilosCSS/formulario.css">
    </head>
    <body>
        <form action="" method="get">
            <h1>Bienvenid@, ingresa a tu cuenta</h1>
            <h4>Nombre de usuario:</h4><input type="text" id="nombre" name="log_Usuario" placeholder="Ingresa tu nombre de usuario" required>
            <h4>Contraseña:</h4><input type="password" id="password" name="log_contraseña" placeholder="Ingresa tu contraseña" required>
            <input type="submit" id="btn_Ingresar" value="Ingresar">
        </form>
    </body>
</html>

Estilo CSS
El siguiente codigo va dentro de la carpeta de estilo CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

 body {
background-image: url(../fondo/fondo1.jpg);
background-size: 100vw 100vh;
background-attachment: fixed;
display: flex;
min-height: 100vh;
}

 form {
margin: auto;
width: 500%;
max-width: 500px;
padding: 20px;
}

 form h1 {
text-align: center;
background: rgba(0,0,0,0.5);
border-radius: 10px;
color: #FFF;
margin-bottom: 15px;
}

 form h4 {
text-align: center;
font-size: 22px;
background: rgba(230,52,74,0.7);
border-radius: 7px;
margin-bottom: 15px;
color: #FFFFFF;
}

 form input[type="text"],input[type="password"] {
width: 100%;
margin-bottom: 15px;
padding: 10px;
border: none;
background: rgba(0,0,0,0.8);
color: #FFFFFF;
font-size: 20px;
border-radius: 10px;
}

 #btn_Ingresar {
width: 100%;
padding: 10px;
color: #FFFFFF;
border: none;
border-radius: 10px;
font-size: 17px;
font-weight: bold;
background: rgba(38,31,245,0.7);
}

 #btn_Ingresar:hover {
cursor: pointer;
background: #261FF5;
}

Resultado final

Así es como de muestra en un tamaño de 480px o dispositivos móviles
Así es como de muestra en un tamaño de 768px o tablets
Así es como de muestra en un tamaño de 1024px o navegador de escritorio