Navegar:305
Crear un sitio web responsivo es una habilidad esencial para cualquier desarrollador front-end. Un sitio web responsivo ajusta su diseño y contenido según el dispositivo y el tamaño de la pantalla, lo que garantiza una excelente experiencia de usuario en todos los dispositivos. En este artículo, lo guiaremos a través del proceso de creación de un sitio web responsivo básico utilizando HTML y CSS.
Antes de comenzar, debes tener conocimientos básicos de HTML y CSS. También será beneficiosa la familiaridad con CSS Flexbox y las consultas de medios.
Comience creando una nueva carpeta de proyecto y agregando los siguientes archivos:
Abre index.html y agrega la estructura HTML básica que desees, puede ser cualquier cosa:
Responsive Website
My Responsive Website
Welcome to My Website
This is a simple responsive website built with HTML and CSS.
About Us
We provide excellent web development services.
Our Services
We offer a wide range of web development services.
Contact Us
Feel free to reach out to us for any inquiries.
A continuación, abra el archivo estilos.css y comience agregando algunos estilos básicos:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
}
header h1 {
text-align: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
}
nav ul li {
margin: 0 1rem;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
position: fixed;
width: 100%;
bottom: 0;
}
Para que el sitio web responda, utilizaremos consultas de medios. Estos nos permiten aplicar diferentes estilos según el tamaño de la pantalla. Agregue las siguientes consultas de medios a estilos.css:
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 0.5rem 0;
}
main {
padding: 1rem;
}
}
@media (max-width: 480px) {
header h1 {
font-size: 1.5rem;
}
nav ul li {
margin: 0.25rem 0;
}
main {
padding: 0.5rem;
}
}
Abra index.html en un navegador web y cambie el tamaño de la ventana del navegador para ver cómo se ajusta el diseño a los diferentes tamaños de pantalla. Debería ver el menú de navegación apilado verticalmente y el relleno alrededor del contenido disminuye a medida que disminuye el ancho de la pantalla.
¡Ya has creado un sitio web responsivo sencillo utilizando HTML y CSS! Este ejemplo cubre los conceptos básicos de la estructuración de una página web y el uso de consultas de medios para crear un diseño responsivo. A medida que adquieras más experiencia, podrás explorar técnicas avanzadas como CSS Grid, Flexbox e imágenes responsivas para crear diseños más complejos y dinámicos.
¡¡¡Manténganse al tanto!!!
Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.
Copyright© 2022 湘ICP备2022001581号-3