El diseño responsivo se utiliza para adaptar automáticamente el tamaño de las páginas web a diferentes dispositivos y tamaños de pantalla; para lo cual se debe tener en cuenta varios aspectos importantes en el desarrollo de la programación de la página.
A continuación, se deben tener en cuenta algunos pasos para el diseño responsivo:
- Para los estilos se debe utilizar la hoja de CSS.
- No se recomienda utilizar tamaños fijos para los elementos como imágenes y contenedores. Se recomienda usar el porcentaje (%) y unidades relativas como el (vw) para el ancho de la ventana.
- Para las imágenes se recomienda usar la propiedad: max-width: 100%, que hará que las imágenes se adapten automáticamente al tamaño del contenedor.
- Los media Queries@media (max-width: 800px), es propiamente el código que se ejecutara para ajustar el tamaño de la página web en las pantallas de los dispositivos móviles, laptos, tablets y ordenadores. Los media Queries, por lo general son reglas que se cumplen sí el tamaño de la pantalla, tiene un ancho máximo de 800 pixeles o el tamaño que fije el programador, como en el caso del ejemplo que se cita en este numeral.
- Para el tamaño de la fuente, se recomienda usar las unidades relativas, como: em y rem, en vez de píxeles fijos, para que el tamaño de los textos se ajusten al tamaño de la pantalla.
- Utilizar CSS grid o Flexbox, para crear diseños flexibles que se ajusten al espacio disponible del contenedor.
- Como un paso más debemos observar como se aprecia nuestra página web en el navegador y para ello realizamos simulaciones en las herramientas del desarrollador del navegador, probando los distintos tamaños de pantalla.
Ejemplo de Diseño Responsivo:
- En el editor de texto de tu preferencia, nos vamos al archivo html y generamos el código html básico, colocando. html5
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>```
- Posteriormente, dentro de la etiqueta body creamos la etiqueta section y dentro de ella la etiqueta div y escribimos el mensaje que queramos.
- Luego, en la etiqueta style, le damos estilos al selector div, colocándole un background y el color e igualmente le damos estilos a section agregando la propiedad width: 100% para que los demás elementos de imágenes y containers se ajusten proporcionalmente al tamaño de la pantalla. Se le agrega un display: flex y un justify-content: center.
- Se crea otro div con un class de nombre card y se le agrega una imágen y dos párrafos con mensajes de texto. Asimismo, en style se le dan los estilos a la class cardimg, colocándole un width de 100%, para que la imagen se ajuste automáticamente al tamaño de section.
- Se estilizan los párrafos con un text-align:center y un color purple.
- En style se le agrega un media Querie max-width de 800px y se le dan los estilos a la class card con un display: inline-block.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Responsive design</title><style>section {
width: 100%;
display: flex;
justify-content: center;
}
div {
background-color: #DAF7A6;
color: blue;
}
.cardimg{
width: 100%;
}
.cardp {
text-align: center;
color: purple;
}
.cardp:nth-child(3) {
color: green;
}
@media (max-width: 800px) {
.card {
display: inline-block;
}
}
</style></head><body><section><div>Diseño de respuesta de la página web</div><divclass="card"><imgsrc="https://e0.pxfuel.com/wallpapers/680/380/desktop-wallpaper-pin-de-anna-en-fondo-de-pantalla-lobo-dibujos-bonitos-de-animales-dibujos-bonitos-wolf-art-thumbnail.jpg"alt="Imágen Diseño"><p>En imágenes usar la propiedad: max-width: 100%</p><p>Para imágenes y contenedores no usar tamaños fijos</p></div></section></body></html>```
Gracias por leer mi tutorial y con gusto en lo que haya podido contribuir en el aprendizaje del Diseño de respuesta.
