En este pequeño tutorial te mostraré como hacer que el diseño de tú página web sea responsiva, es decir que se muestre de forma diferente dependiendo el dispositivo en dónde se visualice. En este ejemplo será mostrar unas cards en forma de grid (grilla, cuadricula, matriz, etc.) para un computador y en columna para un dispositivo móvil.
Requisitos
Puede ser desde un editor de texto como notepad (sin colores) o uno más avanzado como sublime text, Visual Studio Code que tiene coloreado de texto y caracteristicas avanzadas, o incluso desde la web, como codepen.io que te permite guardar tus cambios y acceder a ellos más tarde.
Comenzamos
Para empezar debo aclarar que en este ejemplo uso Visual Studio Code que me ayuda a autocompletar mis etiquetas HTML, escribiendo html:5 me completa el esqueleto de html ahorrandome tiempo, queda como se ve en la imagen.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>Estructura de mi card
Para especificar la estructura de mi card (tarjeta) agrego lo siguiente dentro de las etiquetas body
<section><divclass="card"><divclass="header"><divclass="photo"><imgclass="picture"src="https://images.pexels.com/photos/982300/pexels-photo-982300.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="Foto de perfil"></div><h2>Angel Martínez</h2><p>Frontend Developer</p></div><divclass="body"><p>I am a Frontend Developer, currently learning in different platforms like Platzi</p></div><divclass="footer"><buttonclass="brand">Hire me!</button></div></div></section>Te explico que es lo que hicimos, agregamos una sección (section), y a continuación unas divisiones (divs) con las siguientes clases:
Agregando diseño a la tarjeta
Dentro de la etiqueta head de nuestro archivo html, podemos escribir la etiqueta style como se muestra a continuación para agregar el diseño a nuestra card:
<head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Cards</title><style>/** Esto es un comentario en css, aquí daremos estilo a nuestros elementos **/</style></head>Como buena práctica es mejor crear un archivo css e importarlo dentro del archivo html ya que conforme vamos agregando estilos se vuelve dificil de leer. Como tarea puedes investigar como hacer esto.
Ahora sí… el contenido del archivo css
Los siguientes estilos son para darle forma a la tarjeta, tal vez no conozcas todas y quieras aprenderlas, puedes estudiarlas a fondo si deseas, pero en este tutorial nos enfocaremos en la responsividad.
styles.css
* {
font-family: "JetBrains Mono",monospace;
}
main {
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.card{
display: flex;
flex-direction: column;
width: 400px;
height: 500px;
border-radius: 15px;
align-items: center;
justify-content: space-around;
box-shadow: rgba(6, 24, 44, 0.4) 0px0px0px2px, rgba(6, 24, 44, 0.65) 0px4px6px -1px, rgba(255, 255, 255, 0.08) 0px1px0px inset;
margin-left: 30px;
margin-right: 30px;
}
.card:hover{
box-shadow: rgba(6, 24, 44, 0.4) 0px0px0px3px, rgba(6, 24, 44, 0.65) 0px4px6px -2px, rgba(255, 255, 255, 0.08) 0px1px1px inset;
}
button {
background-color: #DBBADD;
border-width: 2px;
border-color: #69DDFF;
border-radius: 5px;
}
.photo {
max-width: 100px;
max-height: 100px;
}
.picture {
width: 125px;
height: 125px;
border-radius: 50%;
/* background-size: cover; */margin-left: 30px;
margin-right: 20px;
margin-top: 10px;
object-fit: cover;
}
.headerh2, p{
text-align: center;
}
.headerh2 {
padding-top: 20px;
}
.headerp {
padding-top: 10px;
}
.header, .body , .footer{
margin-left: 20px;
margin-right: 20px;
}
.brand {
align-items: center;
appearance: none;
background-color: #FCFCFD;
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 02px4px,rgba(45, 35, 66, 0.3) 07px13px -3px,#D6D6E70 -3px0 inset;
box-sizing: border-box;
color: #36395A;
cursor: pointer;
display: inline-flex;
font-family: "JetBrains Mono",monospace;
height: 48px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: 18px;
}
.brand:focus {
box-shadow: #D6D6E70001.5px inset, rgba(45, 35, 66, 0.4) 02px4px, rgba(45, 35, 66, 0.3) 07px13px -3px, #D6D6E70 -3px0 inset;
}
.brand:hover {
box-shadow: rgba(45, 35, 66, 0.4) 04px8px, rgba(45, 35, 66, 0.3) 07px13px -3px, #D6D6E70 -3px0 inset;
transform: translateY(-2px);
}
.brand:active {
box-shadow: #D6D6E703px7px inset;
transform: translateY(2px);
}
Resultado con el css aplicado
En la imagen se muestran tres tarjetas, esto porque copie tres veces el contenido de section, es lo importante de las clases en css ya que solo escribes una vez el diseño y lo reutilizas las veces que deseas.
A continuación te muestro el html actualizado:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Amazing Cards</title><linkrel="stylesheet"href="card_avanzado.css"></head><body><main><section><divclass="card"><divclass="header"><divclass="banner"></div><divclass="photo"><imgclass="picture"src="https://images.pexels.com/photos/982300/pexels-photo-982300.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="Foto de perfil"></div><h2>Angel Martínez</h2><p>Frontend Developer</p></div><divclass="body"><p>I am a Frontend Developer, currently learning in different platforms like Platzi</p></div><divclass="footer"><buttonclass="brand">Hire me!</button></div></div></section><section><divclass="card"><divclass="header"><divclass="banner"></div><divclass="photo"><imgclass="picture"src="https://images.pexels.com/photos/977935/pexels-photo-977935.jpeg?auto=compress&cs=tinysrgb&w=600"alt="Foto de perfil"></div><h2>Aureliano</h2><p>Frontend Developer</p></div><divclass="body"><p>I am a Frontend Developer, currently learning in different platforms like Platzi</p></div><divclass="footer"><buttonclass="brand">Hire me!</button></div></div></section><section><divclass="card"><divclass="header"><divclass="banner"></div><divclass="photo"><imgclass="picture"src="https://images.pexels.com/photos/2173872/pexels-photo-2173872.jpeg?auto=compress&cs=tinysrgb&w=600"alt="Foto de perfil"></div><h2>Horacio</h2><p>Frontend Developer</p></div><divclass="body"><p>I am a Frontend Developer, currently learning in different platforms like Platzi</p></div><divclass="footer"><buttonclass="brand">Hire me!</button></div></div></section></main></body></html>Finalmente lo responsivo 🐝
Para hacer responsivo nuestro diseño he utilizado display: flex; para mostrar ya sea en fila o en columna nuestras cards.
Utilizando media queries podemos especificar el tamaño máximo para cambiar la forma que se muestra ya sea fila o columna. A continuación el código css:
@media (max-width: 376px){
main {
flex-direction: column;
display: flex;
}
.card {
margin-top: 30px;
}
}
Que al inspeccionar desde el navegador tenemos el siguiente resultado:
Dentro del media query podemos poner los cambios que deseamos ocurran cuando el tamaño se cumpla.
Resumen
En este pequeño tutorial de como usar el diseño responsivo con media queries. Es un ejemplo muy básico, espero que haya sido útil para empezar con la responsividad. Gracias por llegar al final de este mini tutorial 💚.
