Media Queries para Diseño Responsive Mobile y Tablet

Clase 47 de 56 • Curso Definitivo de HTML y CSS

Resumen

¿Cómo implementar media queries en un proyecto mobile first con Flexbox?

Comenzar a diseñar sitios web con un enfoque mobile first es esencial para asegurar una experiencia de usuario óptima en dispositivos móviles y escalar adecuadamente a tabletas y escritorios. Usar media queries en CSS permite ajustar las reglas de estilos según el tamaño de la pantalla (breakpoints). A continuación, veremos cómo implementar media queries en un proyecto usando Flexbox, asegurando un diseño adecuado en distintos dispositivos.

¿Cuáles son las buenas prácticas al incluir media queries?

Cuando trabajas con media queries en un archivo CSS, es importante seguir ciertas buenas prácticas:

Ubicar siempre al final del archivo: Coloca todos los media queries en la parte inferior de tu archivo CSS. Esto facilita que los miembros del equipo identifiquen rápidamente los lugares donde se encuentran los diferentes breakpoints.
Sintaxis básica de un media query: El comando básico para escribir una media query es el siguiente:
```
@media (min-width: 600px) {
    /* Reglas CSS aquí */
}
```
Usa min-width para mobile first: Al utilizar min-width, defines reglas que se aplican a partir de un cierto tamaño, por lo que comienzas optimizando para pantallas pequeñas y luego escalas hacia pantallas más grandes.

Ejemplo práctico de media queries

Aquí hay un ejemplo de cómo puedes ajustar el layout al ir pasando de un dispositivo móvil a una tableta usando media queries. Imaginemos que tienes contenedores que ocupan el 100% del ancho en dispositivos móviles y quieres cambiar esto en una tableta:

CSS Base para Mobile:
```
.container {
    width: 100%;
}
```

Media Queries para Tabletas:

En el CSS, agrega la media query para dispositivos de 600 píxeles en adelante:

@media (min-width: 600px) {
    .container-2, .container-3, .container-4 {
        width: 50%;
    }
}

¿Cómo implementar varios breakpoints en un proyecto?

Además de ajustar el diseño al pasar de un móvil a una tableta, puedes definir más breakpoints para dispositivos aún más grandes. Por ejemplo, cuando el ancho alcanza 800 píxeles, puedes hacer más ajustes:

@media (min-width: 800px) {
    .c1 {
        width: 60%;
    }
    .c2 {
        width: 40%;
    }
    .c3, .c4 {
        width: 33%;
    }
    .c5 {
        width: 34%;
    }
}

Aquí se ve cómo los distintos elementos cambian su disposición en pantallas más grandes, adaptándose de manera fluida al tamaño del dispositivo.

¿Cómo manejar los estilos en archivos separados?

Una práctica recomendada es separar los estilos de los media queries en diferentes archivos CSS para cada tipo de dispositivo:

Creación de archivos CSS específicos: Crea archivos como tablet.css y desktop.css.

Enlace de archivos CSS con media queries:

<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 600px)">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 800px)">

Al hacer esto, mantienes el código organizado y permites que el navegador decida qué estilos cargar basándose en el tamaño del dispositivo. Aunque se descargan todos, el navegador prioriza los del tamaño actual y carga los otros después.

El enfoque del proyecto mostly fluid permite que tu sitio sea adaptable, reorientando elementos según el dispositivo, pero permaneciendo limitado para un control mayor del diseño. Continuar mejorando nuestras habilidades en desarrollo web asegura que los proyectos sean eficientes y agradables para los usuarios finales.

Stiven Castillo Montero

student•

Una buena práctica es separar los estilos para cada tamaño de pantalla (phone.css, tablet.css, desktop.css) y manejar los estilos para cada uno.

Alen Samuel

student•

Usando esta metodología tendrías que cargar todas esos archivos css en el html ?

Joel Dominguez Merino

student•

Exactamente!

Iván Arcos

student•

La verdad es que Diego explica perfecto este tipo de temas, me quedó mucho más claro esto de las media queries 👌🏼

Juan Carlos Morales Monguí

student•

Si compañero, Diego es un excelente profesor Comparto tu comentario

Victor Andres Castillo Zambrano

student•

muy cierto

Kebyn Enrique Ajin Elías

student•

Comparto mi práctica implementando mostly fluid :)

Camila Andrea Díaz Serrano

student•

Que bonito!!

Paola Pastrán

student•

Lindo!

Mauricio Galvez

student•

| | | HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)">
    <link rel="stylesheet" href="./laptop.css" media="screen and (min-width: 800px)">
    <title>Document</title>
</head>
<body>
    <main class="container">
        <div class="c c1"></div>
        <div class="c c2"></div>
        <div class="c c3"></div>
        <div class="c c4"></div>
        <div class="c c5"></div>
        <div class="c c6"></div>
    </main>
</body>
</html>

| | style.css

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html
{
    font-size: 62.5%;
}

.container
{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1300px;
    padding: 3rem;
    margin: 0 auto;
}

.c
{
    width: 100%;
    min-width: 150px;
    height: calc(17vh - 1rem);
    margin-bottom: 3rem;
    border-radius: 10px;
}

.c1
{
    background-color: #c72929;
}

.c2
{
    background-color: #df6060;
}

.c3
{
    background-color: #e4b342;
}

.c4
{
    background-color: #a0db32;
}

.c5
{
    background-color: #43d39c;
}

.c6
{
    background-color: #43b6d3;
    margin: 0;
}

| tablet.css

.c2, .c3
{
    width: 48%;
}

.c4
{
    height: calc(60vh - 5rem);
}

| laptop.css

.c1, .c2
{
    height: calc((100vh/3) - 4rem);
}

.c1
{
    width: 39%;
}

.c2
{
    width: 58%;
}

.c3, .c4, .c5
{
    width: calc((100%/3) - 2%);
    height: calc((100vh/3) - 4rem);
}

.c6
{
    width: 100%;
    height: calc((100vh/3) - 4rem);
}

Julián Ramírez

student•

Está genial, ¿de dónde sacas las medidas para hacer los cálculos? Hay muchas cosas que no entiendo pero se ve muy chévere.

Mauricio Galvez

student•

Hola! en este otro aporte hablo un poco de el tema de los cálculos: https://platzi.com/comentario/1737420/ Si te queda alguna duda puedes consultarme. Nos vemos en la conf 🤘🔥

Jhoana España Urresty

student•

Mi practica

En este caso después de 800px, el fondo de algunas secciones no completo el ancho de la pantalla, me imagino que debí usar una clase en un contenedor por aparte

Mauricio Carrasco

student•

Los diseños están increíbles. ¿Tu los hiciste?

Jhoana España Urresty

student•

Sii, gracias

Alejandro Ruiz Melo

student•

Habiliten estas opciones en el navegador:

Cristian Ramos

student•

genio!

Rolando Mamani Salas

student•

justo nesesitaba eso Gracias

Percy Tejada

student•

Les comparto el enlace de un curso para aprender a manejar la Chrome DevTools, el profe del curso tambien es el Jedi Diego :) https://platzi.com/cursos/devtools/

Adrian Ferney Rivera Mantilla

student•

Muchas gracias!! Lo estaba buscando.

Joel Dominguez Merino

student•

Se ve increíble, pero es recomendado llegar con bases de JS no? Aún me quedan cursos por ver. Aún asi muchas gracias por la recomendación! :)

Jhonatan Guerrero

student•

No es mucho, pero es trabajo honesto...

HTML

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mostly Fluid</title>
  <link rel="stylesheet" href="./styles/mostly.css">
  <link rel="stylesheet" href="./styles/mostly-tablet.css" media="screen and (min-width: 600px)">
  <link rel="stylesheet" href="./styles/mostly-tablet-hz.css" media="screen and (min-width: 800px)">
</head>

<body>
  <main class="container">
    <div class="class1"></div>
    <div class="class2"></div>
    <div class="class3"></div>
    <div class="class4"></div>
    <div class="class5"></div>
    <div class="class6"></div>
  </main>
</body>

</html>

CSS mostly.css

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  font-size: 62.5%;
}
body { 
  background-color: #efe7da;
}
.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.content {  
  margin: 0px;
}
.class1, .class2, .class3, .class4, .class5, .class6 {
  width: 100%;
  min-width: 150px;
  height: 150px;
  margin: 10px;
  border-radius: 20px;
}
.class1 {
  background-color: blue;
}
.class2 {
  background-color: blueviolet;
}
.class3 {
  background-color: burlywood;
}
.class4 {
  background-color: coral;
}
.class5 {
  background-color: cadetblue;
}
.class6 {
  background-color: salmon;
}

mostly-tablet.css

.container { 
  justify-content: space-evenly;
  margin: 0 auto; 
}
.class2, .class3, .class4, .class5 { 
  width: calc(50% - 20px)
}

mostly-tablet-hz.css

.container {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}
.class1 {
  width: calc(75% - 20px)
} 
.class2 {
  width: calc(25% - 20px)
}  
.class3, .class4, .class5{
  width: calc(33% - 20px);
} 
.class6{
  width: 100%;
}

Sebastián Arredondo Posada

student•

Buen trabajo, felicitaciones ¿Cómo logras filmar los cambios? me gustaría saber. Gracias.

Eduardo Rodriguez

student•

Excelente!!

Fernando Vela Vargas

student•

Daniel Torrealba Febres Cordero

student•

Esto está súper.

Luciano Madroñal correa

student•

genial, muy util.

James Kristof Ubiarco Rodriguez

student•

Recuerden que con CTRL + K y CTRL + C se puede comentar cualquier código en VisualStudio.

Jhean Pacheco

student•

Una regla completa a usar en los media querie pienso que es la siguiente:

only screen and (breakpoint)

Only: Evita cargar los media queries en navegadores que no los soporten. Screen: Carga los media queries solo en pantallas (mobile, tablet y desktop).

Luis Rodríguez

student•

Excelente aporte, muchas gracias 👌🏼.

Gianfranco Iván Misari Ortega

student•

Israel Lopez Lujan

student•

Yo después de ver esta clase jajajajaja

Jorge Eduardo Morales Palencia

student•

sii!!

Anderson Josué Oroya Silva

student•

El patrón Mostly fluid consiste, principalmente, en una cuadrícula fluida. Por lo general, en las pantallas grandes o medianas se mantiene el mismo tamaño y simplemente se ajustan los márgenes en las más anchas.

En las pantallas más pequeñas, la cuadrícula fluida genera el reprocesamiento del contenido principal, mientras que las columnas se apilan verticalmente. Una de las mayores ventajas de este patrón es que, en general, solo se necesita un punto de interrupción entre las pantallas grandes y las pequeñas.

Cesar Hernández Ramírez

student•

Thank you

John Cardenas

student•

El espacio que queda en blanco en el media querie de 600px es porque a .c1, .c2 y .c3 se les dio un width de 50% y a .c5 no se le dió ningún width, entonces este baja porque el valor que tiene en el archivo principal de estilos es de 100% y no puede ocupar ese espacio vacío con 100% de width.

Joel Dominguez Merino

student•

Excelente aclaración! Al principio si me había preguntado eso, se veía raro. Después entendí que efectivamente era un espacio en blanco por que la c5 tenia un width de 100% y este no podía subir.

Luis Rodríguez

student•

Muchas gracias por esa aclaración, quedé loco cuando ví eso, pero gracias a este aporte, ya quedé tranquilo 🙂.

Mauricio Carrasco

student•

Les comparto mi práctica :D

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="../../node_modules/normalize.css/normalize.css"
    />
    <link rel="stylesheet" href="./styles/mobile.css" />
    <link
      rel="stylesheet"
      href="./styles/tablet.css"
      media="screen and (min-width: 768px)"
    />
    <link
      rel="stylesheet"
      href="./styles/desktop.css"
      media="screen and (min-width: 1024px)"
    />
  </head>
  <body>
    <main class="ctn">
      <header class="c c1">
        <picture class="logo-ctn"
          ><img src="./src/logo-aime.svg" alt="Logo" class="logo"
        /></picture>
        <nav class="menu-list">
          <ul>
            <li class="list-item"><a href="#">Home</a></li>
            <li class="list-item"><a href="#">Blog</a></li>
            <li class="list-item"><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>
      <main class="main">
        <div class="c c2">
          <picture>
            <img
              src="./src/one-piece.jpg"
              alt="Anime One Piece"
              class="img-anime"
            />
            <figcaption>One Piece</figcaption>
          </picture>
        </div>
        <div class="c c3">
          <picture>
            <img src="./src/snk.jpg" alt="Anime One Piece" class="img-anime" />
            <figcaption>Shingeki No Kyojin</figcaption>
          </picture>
        </div>
        <div class="c c4">
          <picture>
            <img
              src="./src/naruto.jpg"
              alt="Anime One Piece"
              class="img-anime"
            />
            <figcaption>Naruto</figcaption>
          </picture>
        </div>
        <div class="c c5">
          <picture>
            <img
              src="./src/kimetsu-no-yaiba.jpg"
              alt="Anime One Piece"
              class="img-anime"
            />
            <figcaption>Kimetsu No Yaiba</figcaption>
          </picture>
        </div>
      </main>
      <footer class="c c6">
        <ul>
          <li class="contact-item redSocial"><a href="#">Twitter</a></li>
          <li class="contact-item redSocial"><a href="#">Github</a></li>
          <li class="contact-item redSocial"><a href="#">Linkedin</a></li>
        </ul>
      </footer>
    </main>
  </body>
</html>

mobile.css

* {
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}

.ctn {
  font-size: 1rem;
  font-family: sans-serif;
}
.main {
  display: flex;
  flex-wrap: wrap;
}

.c {
  width: 100%;
  min-width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.c1 {
  height: 10vh;
}
.c1,
.c6 {
  background-color: rgba(219, 169, 65, 0.5);
}

.c2 {
  background: rgb(40 55 122);
  background: linear-gradient(
    90deg,
    rgb(40 55 122) 40%,
    rgba(116, 174, 247, 1) 100%
  );
}
.c3 {
  background: rgb(146, 13, 8);
  background: linear-gradient(
    90deg,
    rgba(146, 13, 8, 1) 25%,
    rgba(219, 169, 65, 1) 100%
  );
}
.c4 {
  background: rgb(228, 80, 41);
  background: linear-gradient(
    90deg,
    rgba(228, 80, 41, 1) 25%,
    rgba(245, 191, 31, 1) 100%
  );
}
.c5 {
  background: rgb(25, 26, 42);
  background: linear-gradient(
    90deg,
    rgba(25, 26, 42, 1) 25%,
    rgba(150, 166, 176, 1) 100%
  );
}
.c6 {
  height: 10vh;
}

.c1,
.menu-list ul,
.c6 ul {
  width: inherit;
  padding: 0;
  display: flex;
  align-items: center;
}

.c1 {
  justify-content: space-between;
}

.c6 ul {
  justify-content: space-evenly;
}

.c1 .logo {
  margin-left: 1.5rem;
  width: 10rem;
}

.menu-list .list-item {
  padding: 0 1rem;
}

.menu-list .list-item {
  padding: 0 1.2rem;
}

.c2,
.c3,
.c4,
.c5 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 150px;
}

.main picture {
  padding: 3rem 4rem 2rem;
  text-align: center;
  font-size: 2.5rem;
}
.main picture {
  color: rgba(255, 255, 255, 0.9);
}

.main picture figcaption {
  margin-top: 1.5rem;
}
.main .img-anime {
  width: 30rem;
  border-radius: 1rem;
}

.menu-list li,
.c6 li {
  list-style: none;
}
.ctn a {
  text-decoration: none;
  color: #000;
}

.ctn .list-item {
  text-decoration: none;
}
.ctn .list-item:hover {
  text-decoration: underline;
}

.ctn .contact-item {
  text-decoration: underline;
}
.ctn .contact-item:hover {
  text-decoration: none;
}

tablet.css

@media (min-width: 768px) {
  .c {
    font-size: 1.6em;
  }
  .ctn {
    font-size: 1.6rem;
  }
  .c1 {
    height: 15vh;
  }
  .c1 {
    justify-content: space-between;
  }
  .c1 .logo {
    margin-left: 3rem;
    width: 16rem;
  }

  .menu-list .list-item {
    padding: 0 2rem;
  }

  .c2,
  .c3,
  .c4,
  .c5 {
    width: 50%;
    height: calc((100vh - 30vh) / 2);
  }
  .c6 {
    height: 15vh;
  }
}

desktop.css

@media (min-width: 1024px) {
  .ctn {
    width: 1024px;
    margin: 0 auto;
  }
  .c1 .logo {
    margin-left: 3.5rem;
    width: 17rem;
  }
  .menu-list .list-item {
    padding: 0 3rem;
  }
}

JOSE PINTO VEGA

student•

Que bonito te quedo, muy buena esa. (Y)

Carlos Eduardo Gomez García

teacher•

Así de fácil es trabajar con Flexbox, y es que realmente Flexbox es muy fácil de manipular, y tal vez pienses que nada puede superar a Flexbox, pues, si que hay algo que puede superar a Flexbox, vaya que lo hay jaja, espero que se llegue a ver ese tema en este curso 👀

Fabiola Rocha

student•

Una pistaaaa profe, una pistaaa porfa jajaj

Porfirio González López

student•

Pista: Flex es unidimensional ¿Tú que crees que será el salto?

EDWIN VASQUEZ VALLE

student•

y los nuevos archivos .css de estilos que se crean se deben reiniciar las configuraciones por defecto agregando:

o con que el style.css lo lleve es suficiente? se lo debo poner a cada uno? yo se lo puse pero vi que el profe no,

Carlos Eduardo Gomez García

teacher•

¡Hola!, con que el archivo style.css lo tenga es suficiente porque este archivo siempre será cargado, por lo que esos estilos siempre serán leídos, si lo pusieras en otros archivos entonces a cada rato se estarían remplazando los mismos estilos, por eso basta con hacerlo solo una vez :D

EDWIN VASQUEZ VALLE

student•

Ahhhh muchas gracias! Si tiene todo el sentido no habia caido en cuenta, gracias!!

Daniel Fabiani

student•

Nota: a mi No me aparecían las barras de meda queries (naranjas), para que te salgan le dan al menú a la derecha (los 3 puntitos) y están las opciones , se puede activar el_ pixel ratio_, para que aparezca el tipo de dispositivo, y los media queiries. Espero les sirva, saludos.

Rolando Mamani Salas

student•

Gracias

Héctor Padilla

student•

Una forma de ver tus proyectos en tiempo real (desktop, tablet y/o mobile) es usando la plataforma Repl.it.

Solo tienes que copiar la url que te genera la plataforma y abrirlo en cualquier dispositivo. Además, puedes compartir tu proyecto con otras personas para colaborar o ayudarte en tu código.