En este proyecto práctico, vamos a crear una página web simple que se adapte a diferentes tamaños de pantalla utilizando técnicas de diseño responsive. Vamos a usar HTML y CSS, incluyendo media queries y variables CSS, para lograr un diseño que se ajuste bien a dispositivos móviles, tablets y pantallas de escritorio.
1. Estructura del Proyecto
Vamos a construir una página de inicio para una ficticia empresa de diseño web llamada “WebFlex”. La página incluirá un encabezado, una sección de servicios, y un pie de página.
Estructura de Archivos:
/proyecto-responsive
├── index.html
└── styles.css2. Código HTML (index.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebFlex - Diseño Responsive</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>WebFlex</h1>
<nav>
<ul>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<section id="servicios">
<h2>Nuestros Servicios</h2>
<div class="servicio">
<h3>Diseño Web</h3>
<p>Creación de sitios web atractivos y funcionales.</p>
</div>
<div class="servicio">
<h3>Marketing Digital</h3>
<p>Estrategias para potenciar tu presencia en línea.</p>
</div>
<div class="servicio">
<h3>SEO</h3>
<p>Optimización para motores de búsqueda.</p>
</div>
</section>
<footer>
<p>© 2024 WebFlex. Todos los derechos reservados.</p>
</footer>
</body>
</html>3. Código CSS (styles.css)
:root {
--color-fondo: #f4f4f4;
--color-principal: #3498db;
--color-texto: #333;
--tamaño-fuente: 16px;
--espaciado-base: 16px;
}
body {
margin: 0;
font-family: Arial, sans-serif;
font-size: var(--tamaño-fuente);
background-color: var(--color-fondo);
color: var(--color-texto);
}
header {
background-color: var(--color-principal);
color: #fff;
padding: var(--espaciado-base);
text-align: center;
}
header h1 {
margin: 0;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
section#servicios {
padding: var(--espaciado-base);
text-align: center;
}
.servicio {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
margin: var(--espaciado-base) 0;
padding: var(--espaciado-base);
}
footer {
background-color: var(--color-principal);
color: #fff;
text-align: center;
padding: var(--espaciado-base);
position: fixed;
bottom: 0;
width: 100%;
}
/* Media Queries */
/* Estilos para pantallas pequeñas (móviles) */
@media (max-width: 600px) {
nav ul li {
display: block;
margin: 10px 0;
}
.servicio {
margin: var(--espaciado-base) 0;
}
footer {
position: static;
}
}
/* Estilos para pantallas medianas (tablets) */
@media (min-width: 601px) and (max-width: 900px) {
.servicio {
display: inline-block;
width: 45%;
margin: 2.5%;
}
}
/* Estilos para pantallas grandes (escritorios) */
@media (min-width: 901px) {
.servicio {
display: inline-block;
width: 30%;
margin: 1.5%;
}
}4. Explicación del Código
- Variables CSS: Definimos variables en
:rootpara manejar colores, tamaños de fuente y espaciado, facilitando cambios globales. - Media Queries:
- Pantallas Pequeñas: Ajustamos el menú de navegación para que los enlaces se muestren en bloque y el pie de página se alinee con el contenido.
- Pantallas Medianas: Los servicios se muestran en dos columnas.
- Pantallas Grandes: Los servicios se muestran en tres columnas para aprovechar el espacio adicional.
5. Prueba del Proyecto
- Guardar los Archivos: Asegúrate de que los archivos
index.htmlystyles.cssestén en la misma carpeta. - Abrir el Navegador: Abre
index.htmlen tu navegador para ver el diseño responsive en acción. - Probar en Diferentes Dispositivos: Ajusta el tamaño de la ventana del navegador para simular diferentes dispositivos y verificar que el diseño se adapte correctamente.
6. Mejoras y Personalización
Puedes expandir este proyecto añadiendo más secciones, mejorando el diseño con más estilos, o añadiendo interactividad con JavaScript. También puedes explorar técnicas avanzadas de CSS como Flexbox y Grid para crear diseños aún más complejos y adaptativos.
Este proyecto te proporciona una base sólida para crear un diseño responsive básico. A medida que avances, puedes experimentar con diferentes técnicas y estilos para personalizar y mejorar tu diseño.