¡Bienvenido Platzinauta!
Si tienes deseos de aprender, prepárate para este tema que te ayudará en tu progreso de Desarrollador Fronted
Hablaremos de cómo podemos sacarle provecho a esta herramienta muy usada actualmente
MEDIA QUERIES
Los media queries nos permiten hacer que nuestros proyectos sean multiplataforma mediante breakpoints. Los breakpoints son puntos donde hacemos cambios, como renderizar elementos o contenedores. Los media querie se agregan así:
@media (min-width: 600px) {
.c2,
.c3,
.c4 {
width: 50%;
}
.letra {
font-size: 12px;
}
}
Existen diferentes estrategias para trabajar el responsive, y la más recomendada actualmente es la mobile first. Esta nos invita a desarrollar desde un dispositivo mobile y luego ir escalando a dispositivos mayores. El orden que normalmente se maneja es: mobile, tablet, desktop.
La mejor forma de trabajar con media queries es enlazando los archivos de estilos desde la etiqueta “head”. De esta manera:
<link
rel="stylesheet"
href="./estilos.css"
/>
<link
rel="stylesheet"
href="./tablet.css"
media="screen and (min-width: 600px)"
/>
<link
rel="stylesheet"
href="./desktop.css"
media="screen and (min-width: 800px)"
/>
El primer link siempre será el mobile y no hay necesidad de especificar el atributo media.
Hoy aprendiste la importancia de los Media queries para desarrollarte en el Responsive Design. Si quieres saber las múltiples estrategias de este concepto, lo repasaremos en un siguiente tutorial.
¡NUNCA PARES DE APRENDER!
Curso de Frontend Developer
