responsive desing en html5 buen dia.
tengo este codigo y quiero hacerlo responsivo y que funcione con todos los dispositivos moviles.
codigo html
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portada</title>
<link rel="stylesheet" type="text/css" href="portada.css">
</head>
<body>
<body style="background:#000000">
<img src="logo.jpg" width="300px" height="100px" class="imgcenter">
<style type="text/css">
IMG.imgcenter{
display: block;
margin-left: auto;
margin-right: auto;
border:solid #ACD502;
position: relative;
top:100px; left:15opx;
}
</style>
</head>
<body>
<section id="formulario">
<form action="">
<input type="text" id="nombre" name="nombre" placeholder="Usuario">
<input type="password" id="pass" name="pass" placeholder="Password">
<input type="button" value="INGRESAR" onclick="window.location = 'opcion1.html';">
</form>
</section>
</body>
</html>
y este es el css
form {
background:#2b2b2a;
background-position:center;
width:29%;
border:1px solid #ccc;
margin:50px;
padding:50px;
border:50px;
border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
box-shadow:inset 0 0 10px #ACD502;
margin:100px auto;
}
input[type="text"], input[type="password"]{
width: 170px;
height: 20px;
margin-left: 90px;
margin-top: 10px;
padding-left: 10px;
font-family: cursive;
outline: 100px;
border:550px;
background-color: #dcdcdc;
-moz-border-radius:30px;
}
input[type="button"]{
margin:20px;
width:310px;
height: 40px;
outline: none;
border:0px;
background-color: #75b6dc;
color:white;
font-size:1.2em;
border-radius: 5px;
-webkit-box-shadow:0px 5px 0px #659dbf;
}
ya he buscado en varios foros y no me cuadran los botones y cajas de texto..
quien me puede hacer el favor de darme una manito un un tuto bien explicado.
gracias por su amable ayuda
