Saludos, para crear una pagina web con diseño responsivo, necesitamos darle las medidas que se van a tomar en cuenta de a cuerdo al dispositivo que tengamos pensado a usar, para esto necesitamos aplicar al ccs el @media()
para ver como se hace les doy el paso a paso con un ejemplo simple:
=====================================================================================================================
primero creamos un archivo html desde el editor de codigo de su preferencia, una vez creado el archivo creamos un arbol html basico:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="“UTF-8”">
<meta http-equiv="“X-UA-Compatible”" content="“IE=edge”">
<meta name="“viewport”" content="“width=device-width," initial-scale=“1.0””>
<title>Responsive</title>
</head>
<body>
</body>
</html>
=====================================================================================================================
una vez hecho esto creamos un div y le insertamos una palabra como ejemplo:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="“UTF-8”">
<meta http-equiv="“X-UA-Compatible”" content="“IE=edge”">
<meta name="“viewport”" content="“width=device-width," initial-scale=“1.0””>
<title>Responsive</title>
</head>
<body>
<div>
Area responsiva
</div>
</body>
</html>
=====================================================================================================================
bien ahora la siguiente parte es armar nuestros estilos ccs:
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset="“UTF-8”">
<meta http-equiv="“X-UA-Compatible”" content="“IE=edge”">
<meta name="“viewport”" content="“width=device-width," initial-scale=“1.0””>
<title>Responsive</title>
<style><br> div{<br> background: purple;<br> }<br> @media (max-width: 150px) {<br> div {<br> background: blue;<br> }<br> }<br></style>
</head>
<body>
<div>
Area responsiva
</div>
</body>
</html>
en este caso le estamos diciendo a html que cuando (@media (max-width: 150px) ) el tamaño máximo sea de 150px el color cambiara de purpura a azul.
esta es la estructura mas básica pero mas entendible de usar el @media para el diseño responsivo, es cuestion de ir probando e ir adaptando tu codigo html con este ejemplo para lograr tus requerimientos.
saludos! y gracias por leer mi post
gracias
muy buen aporte. ,muchas gracias
Excelente Aporte…